CSS实现按钮点击水波纹效果 html<button class="btn btn-default btn-lg ripple">Button Ripple</button> <button class="btn btn-default btn-lg boom">Button Boom</button> css.ripple { position: relative; //隐藏溢出的径向渐变背景 overflow: hidden; } .ripple:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; //设置径向渐变 background-image: radial-gradient(circle, #666 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .3s, opacity .5s; } .ripple:active:after { transform: scale(0, 0); opacity: .3; //设置初始状态 transition: 0s; } .boom { position: relative; //此处不需要设置overflow:hidden,因为after元素需要溢出显示 } .boom:focus{ outline: none; } .boom:after { content: ""; display: block; position: absolute; //扩大伪类元素4个方向各10px top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: none; background-color: #333; background-repeat: no-repeat; background-position: 50%; opacity: 0; transition: all .3s; } .boom:active:after { opacity: .3; //设置初始状态 top: 0; left: 0; right: 0; bottom: 0; transition: 0s; } 效果Button RippleButton Boom.ripple {position: relative; overflow: hidden;}.ripple:after {content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #666 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .3s, opacity .5s;}.ripple:active:after {transform: scale(0, 0); opacity: .3; transition: 0s;}.boom {position: relative;}.boom:focus{outline: none;}.boom:after {content: ""; display: block; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; pointer-events: none; background-color: #333; background-repeat: no-repeat; background-position: 50%; opacity: 0; transition: all .3s;}.boom:active:after {opacity: .3; top: 0; left: 0; right: 0; bottom: 0; transition: 0s;}

js实现html转成pdf代码 引入依赖import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; html2pdf方法html2pdf(fileName) { fileName = typeof (fileName) == 'string' ? fileName : `pdf_${new Date().getTime()}`; html2canvas(document.body).then(function (canvas) { let contentWidth = canvas.width, contentHeight = canvas.height, //一页pdf显示html页面生成的canvas高度; pageHeight = contentWidth / 592.28 * 841.89, //未生成pdf的html页面高度 leftHeight = contentHeight, //页面偏移 position = 0, //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 imgWidth = 595.28, imgHeight = 592.28 / contentWidth * contentHeight, pageData = canvas.toDataURL('image/jpeg', 1.0), pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } pdf.save(`${fileName}.pdf`); }); }

鼠标高亮div边框并读取xpath 插入style节点方法function addCssByStyle(cssString) { var doc = document; var style = doc.createElement("style"); style.setAttribute("type", "text/css"); if (style.styleSheet) { // IE style.styleSheet.cssText = cssString; } else { // w3c var cssText = doc.createTextNode(cssString); style.appendChild(cssText); } var heads = doc.getElementsByTagName("head"); if (heads.length) heads[0].appendChild(style); else doc.documentElement.appendChild(style); } 插入节点addCssByStyle(".hover-red:hover {outline: 1px solid red;}") 读取xpath方法function readXPath(element) { if (element.id !== "") { //判断id属性，如果这个元素有id，则显 示//*[@id="xPath"] 形式内容 return '//*[@id=\"' + element.id + '\"]'; } //这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用） if (element == document.body) { //递归到body处，结束递归 return '/html/' + element.tagName.toLowerCase(); } var ix = 1, //在nodelist中的位置，且每次点击初始化 siblings = element.parentNode.childNodes; //同级的子元素 for (var i = 0, l = siblings.length; i < l; i++) { var sibling = siblings[i]; //如果这个元素是siblings数组中的元素，则执行递归操作 if (sibling == element) { return arguments.callee(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix) + ']'; //如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加 } else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) { ix++; } } }; 鼠标事件$('*').mouseover(function(e) { $(this).addClass("hover-red"); e.stopPropagation(); alert(readXPath(this)); })

嵌入页面js插件式写法 LazyLoad = (function(doc) { var env, head, pending = {}, pollCount = 0, queue = { css: [], js: [] }, styleSheets = doc.styleSheets; function createNode(name, attrs) { var node = doc.createElement(name), attr; for (attr in attrs) { if (attrs.hasOwnProperty(attr)) { node.setAttribute(attr, attrs[attr]); } } return node; } function finish(type) { var p = pending[type], callback, urls; if (p) { callback = p.callback; urls = p.urls; urls.shift(); pollCount = 0; if (!urls.length) { callback && callback.call(p.context, p.obj); pending[type] = null; queue[type].length && load(type); } } } function getEnv() { var ua = navigator.userAgent; env = { async: doc.createElement('script').async === true }; (env.webkit = /AppleWebKit\//.test(ua)) || (env.ie = /MSIE|Trident/.test(ua)) || (env.opera = /Opera/.test(ua)) || (env.gecko = /Gecko\//.test(ua)) || (env.unknown = true); } function load(type, urls, callback, obj, context) { var _finish = function() { finish(type); }, isCSS = type === 'css', nodes = [], i, len, node, p, pendingUrls, url; env || getEnv(); if (urls) { urls = typeof urls === 'string' ? [urls] : urls.concat(); if (isCSS || env.async || env.gecko || env.opera) { // Load in parallel. queue[type].push({ urls: urls, callback: callback, obj: obj, context: context }); } else { // Load sequentially. for (i = 0, len = urls.length; i < len; ++i) { queue[type].push({ urls: [urls[i]], callback: i === len - 1 ? callback : null, obj: obj, context: context }); } } } if (pending[type] || !(p = pending[type] = queue[type].shift())) { return; } head || (head = doc.head || doc.getElementsByTagName('head')[0]); pendingUrls = p.urls.concat(); for (i = 0, len = pendingUrls.length; i < len; ++i) { url = pendingUrls[i]; if (isCSS) { node = env.gecko ? createNode('style') : createNode('link', { href: url, rel: 'stylesheet' }); } else { node = createNode('script', { src: url }); node.async = false; } node.className = 'lazyload'; node.setAttribute('charset', 'utf-8'); if (env.ie && !isCSS && 'onreadystatechange' in node && !('draggable' in node)) { node.onreadystatechange = function() { if (/loaded|complete/.test(node.readyState)) { node.onreadystatechange = null; _finish(); } }; } else if (isCSS && (env.gecko || env.webkit)) { if (env.webkit) { p.urls[i] = node.href; pollWebKit(); } else { node.innerHTML = '@import "' + url + '";'; pollGecko(node); } } else { node.onload = node.onerror = _finish; } nodes.push(node); } for (i = 0, len = nodes.length; i < len; ++i) { head.appendChild(nodes[i]); } } function pollGecko(node) { var hasRules; try { hasRules = !!node.sheet.cssRules; } catch (ex) { pollCount += 1; if (pollCount < 200) { setTimeout(function() { pollGecko(node); }, 50); } else { hasRules && finish('css'); } return; } finish('css'); } function pollWebKit() { var css = pending.css, i; if (css) { i = styleSheets.length; // Look for a stylesheet matching the pending URL. while (--i >= 0) { if (styleSheets[i].href === css.urls[0]) { finish('css'); break; } } pollCount += 1; if (css) { if (pollCount < 200) { setTimeout(pollWebKit, 50); } else { finish('css'); } } } } return { css: function(urls, callback, obj, context) { load('css', urls, callback, obj, context); }, js: function(urls, callback, obj, context) { load('js', urls, callback, obj, context); } }; })(this.document); //api see -> https://github.com/rgrove/lazyload (function(doc, load) { load.css(['main.css'], function() { console.log('css files have been loaded'); }); load.js(['jquery-1.12.4.min.js'], function() { console.log('jquery have been loaded'); createDom(); }); function createDom(){ $('body').append('<div class="bg-red"></div>'); } })(this.document, LazyLoad);

js对URL处理方法 封装代码var urlKit = { domain : function(_url){ return _url?urlKit.pure(_url).replace(/https|http|ftp|rtsp|mms|:|\//g,''):document.domain; }, hostname : function(){ return location.hostname; }, pathname : function(){ return location.pathname; }, port : function(){ return location.port; }, protocol : function(){ return location.protocol; }, pure : function(_url){ var match = _url.match(/((https|http|ftp|rtsp|mms):\/\/)?(([0-9a-z_!~*'().&=+$%-]+:)?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}\.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+\/?)/g); if(match && match.length > 0){ return match[0]; } return urlKit.domain(); } } 使用$('a').each(function(i,e){ if(urlKit.domain()!= urlKit.domain($(e).attr('href')) && $(e).attr('target')!='_blank'){ $(e).attr('target','_blank'); } });

easyui扩展方法之获得tree-node所在层级 扩展方法$.extend($.fn.tree.methods, { getLevel:function(jq,target){ var l = $(target).parentsUntil("ul.tree","ul"); return l.length+1; } }); 使用var node = $(treeid).tree("getSelected"); var lv = $(treeid).tree("getLevel",node.target);

去掉链接<a>标签点击产生的虚线 在css中加入如下代码：a:focus { outline: none; blr: expression(this.onFocus = this.blur ()); }

使用LazyLoad动态加载js/css文件 LazyLoad 介绍LazyLoad是一个简单的动态加载js/css资源文件的js库，可以在需要的页面去加载需求js/css资源，达到页面加载的简洁以及效率。Github 地址https://github.com/rgrove/lazyload/资源下载lazyload.js 下载地址如何使用// 加载js文件，当加载完成后执行回调函数 LazyLoad.js('http://example.com/foo.js', function () { alert('foo.js has been loaded'); }); // 加载多个js文件，当全部加载完成后执行回调函数 LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () { alert('all files have been loaded'); }); // 加载css文件，当加载完成后执行回调函数 LazyLoad.css('foo.css', function (arg) { alert(arg); }, 'foo.css has been loaded'); // 加载多个css文件，当全部加载完成后执行回调函数 LazyLoad.css('foo.css', function () { alert(this.foo); // displays 'bar' }, null, {foo: 'bar'}); 浏览器兼容性 Firefox 2+ Google Chrome Internet Explorer 6+ Opera 9+ Safari 3+ Mobile Safari Android

html5教程 文档类型声明<!DOCTYPE HTML>H5 meta全解声明文档使用的字符编码<meta charset='utf-8'>优先使用 IE 最新版本和 Chrome<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>页面描述<meta name="description" content="不超过150个字符"/>页面关键词屏幕的缩放<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持； <p>height viewport 的高度 （范围从 223 到 10,000 ）</p> <p>user-scalable [yes | no]是否允许缩放</p> <p>initial-scale [数值] 初始化比例（范围从 &gt; 0 到 10）</p> <p>minimum-scale [数值] 允许缩放的最小比例</p> <p>maximum-scale [数值] 允许缩放的最大比例</p> <p>target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）<br /> -- dpi_value 一般是70-400//没英寸像素点的个数<br /> -- device-dpi设备默认像素密度<br /> -- high-dpi 高像素密度<br /> -- medium-dpi 中等像素密度<br /> -- low-dpi 低像素密度</p> <pre><code>####忽略电话号码和邮箱 `&lt;meta name=&quot;format-detection&quot; content=&quot;telphone=no, email=no&quot;/&gt;` ####设置作者姓名及联系方式 `&lt;meta name=&quot;author&quot; contect=&quot;hadong, dhso@163.com&quot; /&gt;` ####搜索引擎抓取 `&lt;meta name=&quot;robots&quot; content=&quot;index,follow&quot;/&gt;` ####启用360浏览器的极速模式(webkit) `&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;` ####避免IE使用兼容模式 `&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;` ####不让百度转码 `&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-siteapp&quot; /&gt;` ####针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 `&lt;meta name=&quot;HandheldFriendly&quot; content=&quot;true&quot;&gt;` ####微软的老式浏览器 `&lt;meta name=&quot;MobileOptimized&quot; content=&quot;320&quot;&gt;` ####UC强制竖屏 `&lt;meta name=&quot;screen-orientation&quot; content=&quot;portrait&quot;&gt;` ####UC强制全屏 `&lt;meta name=&quot;full-screen&quot; content=&quot;yes&quot;&gt;` ####UC应用模式 `&lt;meta name=&quot;browsermode&quot; content=&quot;application&quot;&gt;` ####QQ强制竖屏 `&lt;meta name=&quot;x5-orientation&quot; content=&quot;portrait&quot;&gt;` ####QQ应用模式 `&lt;meta name=&quot;x5-page-mode&quot; content=&quot;app&quot;&gt;` ####添加 RSS 订阅 `&lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;RSS&quot; href=&quot;/rss.xml&quot;/&gt;` ####添加 favicon icon `&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/ico&quot; href=&quot;/favicon.ico&quot;/&gt;` ####SNS 社交标签 </code></pre> <meta property="og:type" content="类型" /> <meta property="og:url" content="URL地址" /> <meta property="og:title" content="标题" /> <meta property="og:image" content="图片" /> <meta property="og:description" content="描述" />Windows 8 磁贴颜色<meta name="msapplication-TileColor" content="#000"/>Windows 8 磁贴图标<meta name="msapplication-TileImage" content="icon.png"/>windows phone 点击无高光<meta name="msapplication-tap-highlight" content="no">IOS 开启全屏显示<meta name="apple-mobile-web-app-capable" content="yes">IOS 改变顶部状态条的颜色<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 在 web app 应用下状态条（屏幕顶部条）的颜色, 默认值为 default（白色）,可以定为 black（黑色）和 black-translucent（灰色半透明）;Safari 设置'添加到主屏幕图标'<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>Safari 设置桌面图标的标题<meta name="apple-mobile-web-app-title" content="标题">判断浏览器<!--[if lt IE 7 ]><html class="oldie ie ie6"> <![endif]--> <!--[if IE 7 ]><html class="oldie ie ie7"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->H5 在移动应用开发的总结转到网易UEDCH5 一些移动应用框架MUI-最接近原生APP体验的高性能前端框架MUI DEMO IONIC-The top open source framework for building amazing mobile apps. Jingle SUI-轻量，小巧且精美的UI库 方便迅速搭建手机H5应用 framework7-特色的HTML框架 可以创建精美的iOS应用 weui-微信原生视觉体验一致的基础样式库 frozenui-简单易用，轻量快捷，为移动端服务的前端框架

html5仿QQ聊天界面 界面截图DEMO网址http://120.27.39.174/acx-chat/html代码<!DOCTYPE html> <html> <head> <title>Acxiom DataGuru Robot</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="Acxiom DataGuru Robot"> <link rel="stylesheet" href="static/lib/weui.min.css"> <link rel="stylesheet" href="static/css/jquery-weui.css"> <link rel="stylesheet" href="static/css/main.css"> </head> <body ontouchstart> <div class="weui_tab"> <div class="weui_navbar"> <div class="navbar_left"></div> <div class="navbar_center">Acxiom DataGuru Robot</div> <div class="navbar_right"></div> </div> <div class="weui_tab_bd scroll_page"> <section class="aui-chat"> </section> </div> <div class="weui_tabbar aui-chat-tool"> <div class="eaitWrap"> <input class="editArea" contenteditable="true"> </div> <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary sendBtn">send</a> </div> </div> <script id="sendMsg" type="text/tpl"> <div class="aui-chat-item aui-chat-right"> <div class="aui-chat-media"> <img src="{{d.avatar}}"> </div> <div class="aui-chat-inner"> <div class="aui-chat-name">{{d.userName}}</div> <div class="aui-chat-content"> <div class="aui-chat-arrow"></div> {{# switch(d.msgType) { case 'text': }} {{d.text}} {{# break; case 'image': }} <img src="{{d.image}}" alt="{{d.text}}"> {{# break; } }} </div> <div class="aui-chat-status"> <i class="aui-iconfont aui-icon-info aui-text-danger"></i> </div> </div> </div> </script> <script id="recvMsg" type="text/tpl"> <div class="aui-chat-item aui-chat-left"> <div class="aui-chat-media"> <img src="{{d.avatar}}"> </div> <div class="aui-chat-inner"> <div class="aui-chat-name">{{d.userName}}</div> <div class="aui-chat-content"> <div class="aui-chat-arrow"></div> {{# switch(d.msgType) { case 'text': }} {{d.text}} {{# break; case 'image': }} <img src="{{d.image}}" alt="{{d.text}}"> {{# break;} }} </div> <div class="aui-chat-status aui-chat-status-refresh"> <i class="aui-iconfont aui-icon-correct aui-text-success"></i> </div> </div> </div> </script> <script id="timeMsg" type="text/tpl"> <div class="aui-chat-header">{{ d.text }}</div> </script> <script src="static/lib/jquery-2.1.4.js"></script> <script src="static/lib/fastclick.js"></script> <script src="static/js/jquery-weui.js"></script> <script src="static/js/swiper.js"></script> <script src="static/lib/laytpl.js"></script> <script src="static/js/main.js"></script> </body> </html> main.css代码body, html { height: 100%; -webkit-tap-highlight-color: transparent; font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体"; } .weui_navbar+.weui_tab_bd { padding: 50px 5px 60px 5px; background-color: #f5f5f5; } .weui-photo-browser-modal { z-index: 999; } .weui_navbar { line-height: 2rem; height: 2rem; background-color: #6ABD78; color: #fff; } .weui-photo-browser-modal .photo-container img { margin: 0 auto; } .weui_tabbar:before { border-top: 1px solid #ccc; } .navbar_left { flex: 1; } .navbar_center { flex: 3; text-align: center; } .navbar_right { flex: 1; } /*chat*/ .aui-chat { width: 100%; height: 100%; } .aui-chat .aui-chat-item { position: relative; width: 100%; margin-bottom: 0.75rem; overflow: hidden; display: block; } .aui-chat .aui-chat-header { width: 100%; text-align: center; margin-bottom: 0.75rem; font-size: 0.6rem; color: #757575; } .aui-chat .aui-chat-left { float: left; } .aui-chat .aui-chat-right { float: right; } .aui-chat .aui-chat-media { display: inline-block; max-width: 2rem; } .aui-chat .aui-chat-media img { width: 100%; border-radius: 50%; } .aui-chat .aui-chat-inner { position: relative; overflow: hidden; display: inherit; } .aui-chat .aui-chat-arrow { content: ''; position: absolute; width: 0.6rem; height: 0.6rem; top: 0.2rem; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; background-color: transparent; } .aui-chat .aui-chat-left .aui-chat-arrow { background-image: -webkit-linear-gradient(45deg, #CCE6DE, #CCE6DE 50%, transparent 50%); background-image: linear-gradient(45deg, #CCE6DE, #CCE6DE 50%, transparent 50%); -webkit-transform: rotate(45deg); transform: rotate(45deg); left: -0.25rem; } .aui-chat .aui-chat-right .aui-chat-arrow { background-image: -webkit-linear-gradient(45deg, #ffffff, #ffffff 50%, transparent 50%); background-image: linear-gradient(45deg, #ffffff, #ffffff 50%, transparent 50%); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); right: -0.25rem; } .aui-chat .aui-chat-content { color: #212121; font-size: 0.7rem; border-radius: 0.2rem; min-height: 1rem; position: relative; padding: 0.5rem; max-width: 80%; word-break: break-all; word-wrap: break-word; } .aui-chat .aui-chat-content img { max-width: 100%; display: block; } .aui-chat .aui-chat-status { position: relative; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; } .aui-chat .aui-chat-name { width: 100%; position: relative; font-size: 0.6rem; color: #757575; margin-bottom: 0.25rem; } .aui-chat .aui-chat-left .aui-chat-name { left: 0.5rem; } .aui-chat .aui-chat-left .aui-chat-status { left: 0.5rem; float: left; } .aui-chat .aui-chat-left .aui-chat-media { width: 2rem; float: left; } .aui-chat .aui-chat-left .aui-chat-inner { max-width: 70%; } .aui-chat .aui-chat-left .aui-chat-content { background-color: #CCE6DE; float: left; left: 0.5rem; } .aui-chat .aui-chat-right .aui-chat-media { width: 2rem; float: right; } .aui-chat .aui-chat-right .aui-chat-inner { float: right; max-width: 70%; } .aui-chat .aui-chat-right .aui-chat-name { float: right; right: 0.5rem; text-align: right; } .aui-chat .aui-chat-right .aui-chat-content { background-color: #ffffff; right: 0.5rem; float: right; } .aui-chat .aui-chat-right .aui-chat-status { float: right; right: 0.5rem; } .aui-chat-tool { min-height: 2rem; } .aui-chat-tool .eaitWrap { position: absolute; right: 4rem; left: 0; } .aui-chat-tool .editArea { line-height: 1.4rem; height: 1.4rem; margin: 0.25rem; padding: 0 0.25rem; overflow-y: auto; overflow-x: hidden; border: none; width: 100%; } .aui-chat-tool .sendBtn { line-height: 1.4rem; height: 1.4rem; margin: 0.25rem; position: absolute; right: 0px; } main.js代码var robotName = 'DataGuru', robotAvatar = 'robot.jpg', userName = 'Andy Li', userAvatar = 'andyli.png', photoBrowser; $(function() { //FastClick FastClick.attach(document.body); //chat images click listener $('.aui-chat').on('click', '.aui-chat-content img', function() { var items = [], item = {}; item.image = $(this).attr('src'); item.caption = $(this).attr('alt'); items.push(item); showPic(items); }); //send button click listener $('.sendBtn').on('click', function() { //send message sendMsgExt(userAvatar, userName, 'text', $('.editArea').val()); //receive message switch ($('.editArea').val()) { case '1': recvMsgExt(robotAvatar, robotName, 'text', 'What do you want to know about the segments?<br>[11] List all the category of your segments.'); break; case '11': recvMsgExt(robotAvatar, robotName, 'image', 'developing', 'developing.jpg'); break; case '2': recvMsgExt(robotAvatar, robotName, 'text', 'What the partner info do you want to know?<br>[21] List all the category of your segments.'); break; case '21': recvMsgExt(robotAvatar, robotName, 'image', 'developing', 'developing.jpg'); break; default: recvMsgExt(robotAvatar, robotName, 'text', 'Hello, I’m DataGuru. What I can help?<br>[1] Segment Consulting<br>[2] Partner Consulting<br>Reply the number of your question. Like “1”.'); } //empty edit area $('.editArea').val(''); }); //1 timestamp timeMsg({ text: new Date().format('yyyy-MM-dd hh:mm:ss') }); //2 welcome recvMsgExt(robotAvatar, robotName, 'text', 'Hello, I’m DataGuru. What I can help?<br>[1] Segment Consulting<br>[2] Partner Consulting<br>Reply the number of your question. Like “1”.'); }); function showPic(items) { photoBrowser = $.photoBrowser({ items: items }); photoBrowser.open(); } function sendMsg(data) { laytpl($('#sendMsg').html()).render(data, function(html) { $('.aui-chat').append(html); scrollToMsg(); }); } function sendMsgExt(_avatar, _userName, _msgType, _text, _image) { var data = { avatar: _avatar, userName: _userName, msgType: _msgType, text: _text, image: _image }; sendMsg(data); } function recvMsg(data) { laytpl($('#recvMsg').html()).render(data, function(html) { $('.aui-chat').append(html); scrollToMsg(); }); } function recvMsgExt(_avatar, _userName, _msgType, _text, _image) { var data = { avatar: _avatar, userName: _userName, msgType: _msgType, text: _text, image: _image }; setTimeout(function(){ recvMsg(data) }, 800); } function timeMsg(data) { laytpl($('#timeMsg').html()).render(data, function(html) { $('.aui-chat').append(html); scrollToMsg(); }); } function scrollToMsg(speed) { if (!speed) speed = 300; $('.scroll_page').animate({ scrollTop: $('.scroll_page').scrollHeight() }, speed); } Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.getHours(), //hour "m+": this.getMinutes(), //minute "s+": this.getSeconds(), //second "q+": Math.floor((this.getMonth() + 3) / 3), //quarter "S": this.getMilliseconds() //millisecond } if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); return format; }

IE8提示‘console’未定义错误的解决方案 在js末尾加入代码// IE8 console.log() 未定义错误 window.console = window.console || (function(){ var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){}; return c; })();

XP下web开发探究 浏览器对web开发的影响1.如果能支持firefox/chrome等浏览器，那么不需要对web兼容性做出要求，可以使用html5最新技术2.如果只能使用IE，因为可能需要支持ActiveX插件，那么需要要求将浏览器从IE6/IE7升级到IE8，IE8是XP系统最后支持的一个版本。3.如果环境什么都不能改版，而恰好浏览器也只是IE6/IE7，那么恭喜你，可以不用往下阅读啦 :) 。jQuery版本对浏览器的支持[jQuery版本支持文档](http://jquery.com/browser-support/)jQuery对IE6-8最后一个支持版本是1.12.4[jQuery 1.12.x](http://https://code.jquery.com/jquery/#jquery-all-1.x)EasyUI版本对浏览器的支持[easyui版本下载列表](http://www.jeasyui.com/download/list.php)EasyUI对IE6-8最后一个支持版本是1.3.2[easyui1.3.2](http://www.jeasyui.com/download/downloads/jquery-easyui-1.3.2.zip)Fontawesome版本对浏览器的支持Fontawesome对IE7最后一个支持版本是1.3.2[font-awesome3.2.1](http://fontawesome.io/3.2.1/assets/font-awesome.zip)

网页返回顶部按钮功能怎么写 1.在页面body底部加入代码#这里引用了font-awesome字体图标 <div class="backTop"> <button class="btn btn-inverse"> <i class="fa fa-chevron-up"></i> </button> </div> 2.加入css样式/*backTop*/ .backTop { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 50px; display: none; } .backTop .btn { margin-top: 2px; height: 50px; display: block; padding: 0; width: 100%; opacity: .4; } .btn-inverse { background: #666; color: #FFF !important; } .backTop .btn:hover { background: #999; opacity: .9; color: #FFF !important; } .backTop .btn i { position: relative; top: -1px; } 3.加入js脚本#滚动到80px高度展示按钮 $(window).scroll(function() { document.documentElement.scrollTop + document.body.scrollTop > 80 ? $('.backTop').fadeIn() : $('.backTop').fadeOut(); }); $(".backTop").on("click", function() { scrollToTop(); }); function scrollToTop(dom, speed) { if (!speed) speed = 300; var top = 0; if (dom && dom.length > 0) top = dom.offset().top; $('html,body').animate({ scrollTop: top }, speed) }

前端注意要点 一些提示 1.多写写共用类 2.不要混用class和style，尽量避免将style直接放在标签上 3.使用栅格布局的时候，要注意页面大小造成的布局混乱 4.借助chrome/firefox的控制台来修改样式 5.看看其他框架，懂得组件的作用以及灵活使用 6.css和js加载顺序，以及优化 推荐一些前端框架 ZUI 一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。 Amazeui 中国首个开源 HTML5 跨屏前端框架 Uikit 轻量级可定制的框架 Layui 轻量级模块化框架