JS插件的几种写法 做JS插件非常考验自己对代码封装以及整体控制和编程思想的理解，下面我们看下JS插件的几种通用写法面向对象思想，类方式//自定义类 function plugin(){} //提供默认参数 plugin.prototype.str = "default param"; //提供方法(如果不传参,则使用默认参数) plugin.prototype.firstFunc = function(str = this.str){ alert(str); } //创建"对象" var p = new plugin(); //调用方法 p.firstFunc("Hello ! I am firstFunc");//Hello ! I am firstFunc p.firstFunc();//default param 闭包方式var plugin =(function(){ function _firstFunc(str){ alert(str); }; return{ firstFunc: _firstFunc, }; })(); 闭包方式2(function(){ //定义一些默认参数 var _options={ default_word:"default hello" } //定义一些api var _plugin_api = { function _config(opts) { if (!opts) return options; for (var key in opts) { options[key] = opts[key]; } return this; }, firstFunc:function(str = _options.default_word){ alert(str); return this;//返回当前方法 }, secondFunc:function(){ alert("secondFunc"); return this;//返回当前方法 } } //这里确定了插件的名称 this.CJPlugin = _plugin_api; })(); CJPlugin.firstFunc("hello");//hello CJPlugin.firstFunc();//default hello CJPlugin.secondFunc();//secondFunc 模块化; !function (factory) { "use strict"; if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') { var target = module['exports'] || exports; factory(target); } else if (typeof define === 'function' && define['amd']) { define(['exports'], factory); } else { factory(window['myjssdk'] = {}); } }(function (HExports) { var exports = typeof HExports !== 'undefined' ? HExports : {}; exports.v = "2.0.0 alpha"; // 基础方法 exports.timeDifference = function (tmpTime) { var mm = 1000; var minute = mm * 60; var hour = minute * 60; var day = hour * 24; var month = day * 30; var ansTimeDifference = 0; var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime(); var nowTime = new Date().getTime(); var tmpTimeDifference = nowTime - tmpTimeStamp; if (tmpTimeDifference < 0) { console.warn("开始日期大于结束日期，计算失败！"); return 0; } var DifferebceMonth = tmpTimeDifference / month; var DifferebceWeek = tmpTimeDifference / (7 * day); var DifferebceDay = tmpTimeDifference / day; var DifferebceHour = tmpTimeDifference / hour; var DifferebceMinute = tmpTimeDifference / minute; if (DifferebceMonth >= 1) { return tmpTime; } else if (DifferebceWeek >= 1) { ansTimeDifference = parseInt(DifferebceWeek) + "个星期前"; } else if (DifferebceDay >= 1) { ansTimeDifference = parseInt(DifferebceDay) + "天前"; } else if (DifferebceHour >= 1) { ansTimeDifference = parseInt(DifferebceHour) + "个小时前"; } else if (DifferebceMinute >= 1) { ansTimeDifference = parseInt(DifferebceMinute) + "分钟前"; } else { ansTimeDifference = "刚刚"; } return ansTimeDifference; }; });

js获取当前屏幕分辨率 function getPixelRatio(context){ var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; };

Sqlite的js编辑库-sql.js npm安装npm install sql.jsnpm地址https://www.npmjs.com/package/sql.jsgithub&文档地址Github Document示例const path = require('path') const fs = require('fs'); const sql = require('sql.js'); function getPath() { let pathArr = Array.prototype.slice.call(arguments); pathArr.unshift(__dirname); return path.join(pathArr.join('/')); } /** SQL **/ function sql(path) { this.path = path; this.db; } sql.prototype = { init: function() { let filebuffer = fs.readFileSync(this.path); let database = new sqljs.Database(filebuffer); this.db = database; }, find: function(_sql, _params) { let stmt = this.db.prepare(_sql), res = []; stmt.bind(_params); while (stmt.step()) { res.push(stmt.getAsObject()); } stmt.free(); return res; }, findOne: function(_sql, _params) { return this.find(_sql, _params)[0]; }, run: function(_sql, _params) { return this.db.run(_sql, _params);; } }; (function() { const SQL = new sql(getPath('data', 'app.sqlite')); SQL.init(); let res = SQL.find("select * from user"); console.log(res); })();

js面向对象编程之继承 引用文章来源: Javascript面向对象编程（二）：构造函数的继承 Javascript面向对象编程（三）：非构造函数的继承 构造函数的继承现在有一个"动物"对象的构造函数function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数function Cat(name,color){ this.name = name; this.color = color; } 使"猫"继承"动物"的五种方法：构造函数绑定第一种方法也是最简单的方法，使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：function Cat(name,color){ Animal.apply(this, arguments); this.name = name; this.color = color; } var cat1 = new Cat("大毛","黄色"); console.log(cat1.species); // 动物 prototype模式如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。Cat.prototype = new Animal(); Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黄色"); console.log(cat1.species); // 动物 Cat.prototype = new Animal(); 我们将Cat的prototype对象指向一个Animal的实例,它相当于完全删除了prototype 对象原先的值，然后赋予一个新值。Cat.prototype.constructor = Cat; 任何一个prototype对象都有一个constructor属性，指向它的构造函数。加了这一行以后，Cat.prototype.constructor指向Animal。 如果没有Cat.prototype = new Animal();这一行 Cat.prototype.constructor是指向Cat的。 console.log(Cat.prototype.constructor == Animal); //true 每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。 console.log(cat1.constructor == Cat.prototype.constructor); // true cat1.constructor也指向Animal！ 这显然会导致继承链的紊乱（cat1明明是用构造函数Cat生成的），因此我们必须手动纠正，将Cat.prototype对象的constructor值改为Cat。这就是第二行的意思。 直接继承prototype第三种方法是对第二种方法的改进。由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过 Animal()，直接继承Animal.prototype。 现在，我们先将Animal对象改写：function Animal(){ } Animal.prototype.species = "动物"; 然后，将Cat的prototype对象，然后指向Animal的prototype对象，这样就完成了继承。Cat.prototype = Animal.prototype; Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黄色"); console.log(cat1.species); // 动物 与前一种方法相比，这样做的优点是效率比较高（不用执行和建立Animal的实例了），比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象，那么任何对Cat.prototype的修改，都会反映到Animal.prototype。所以，上面这一段代码其实是有问题的。请看第二行Cat.prototype.constructor = Cat; 这一句实际上把Animal.prototype对象的constructor属性也改掉了！console.log(Animal.prototype.constructor); // Cat 利用空对象作为中介由于"直接继承prototype"存在上述的缺点，所以就有第四种方法，利用一个空对象作为中介。var F = function(){}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat; F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，就不会影响到Animal的prototype对象。console.log(Animal.prototype.constructor); // Animal function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prototype; } 拷贝继承上面是采用prototype对象，实现继承。我们也可以换一种思路，纯粹采用"拷贝"方法实现继承。简单说，如果把父对象的所有属性和方法，拷贝进子对象，不也能够实现继承吗？这样我们就有了第五种方法。首先，还是把Animal的所有不变属性，都放到它的prototype对象上。function Animal(){} Animal.prototype.species = "动物"; 然后，再写一个函数，实现属性拷贝的目的。function extend2(Child, Parent) { var p = Parent.prototype; var c = Child.prototype; for (var i in p) { c[i] = p[i]; } c.uber = p; } 这个函数的作用，就是将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象。使用的时候，这样写：extend2(Cat, Animal); var cat1 = new Cat("大毛","黄色"); alert(cat1.species); // 动物 非构造函数的继承现在有一个对象，叫做"中国人"。var Chinese = { nation:'中国' }; 还有一个对象，叫做"医生"。var Doctor ={ career:'医生' } 让"医生"去继承"中国人"，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。object()方法function object(o) { function F() {} F.prototype = o; return new F(); } 这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。使用的时候，第一步先在父对象的基础上，生成子对象：var Doctor = object(Chinese); 然后，再加上子对象本身的属性：Doctor.career = '医生'; 这时，子对象已经继承了父对象的属性了。console.log(Doctor.nation); //中国 浅拷贝除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承下面这个函数，就是在做拷贝：function extendCopy(p) { var c = {}; for (var i in p) { c[i] = p[i]; } c.uber = p; return c; } 使用的时候，这样写：var Doctor = extendCopy(Chinese); Doctor.career = '医生'; console.log(Doctor.nation); // 中国 但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。现在给Chinese添加一个"出生地"属性，它的值是一个数组。Chinese.birthPlaces = ['北京','上海','香港']; 通过extendCopy()函数，Doctor继承了Chinese。var Doctor = extendCopy(Chinese); 然后，我们为Doctor的"出生地"添加一个城市：Doctor.birthPlaces.push('厦门'); 这样，Chinese的"出生地"也被改掉了！console.log(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 console.log(Chinese.birthPlaces); //北京, 上海, 香港, 厦门 所以，extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。深拷贝所谓"深拷贝"，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用"浅拷贝"就行了。function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; } 使用的时候这样写：var Doctor = deepCopy(Chinese); 现在，给父对象加一个属性，值为数组。然后，在子对象上修改这个属性：Chinese.birthPlaces = ['北京','上海','香港']; Doctor.birthPlaces.push('厦门'); 这时，父对象就不会受到影响了。console.log(Doctor.birthPlaces); //北京, 上海, 香港, 厦门 console.log(Chinese.birthPlaces); //北京, 上海, 香港 目前，jQuery库使用的就是这种继承方法。

jquery观察者模式 观察者模式又叫做发布-订阅模式观察者模式主要应用于对象之间一对多的依赖关系，当一个对象发生改变时，多个对该对象有依赖的其他对象也会跟着做出相应改变，使程序更易于扩展和维护。观察者模式代码实现(function($) { var o = $({}); $.each({ trigger: 'publish', on: 'subscribe', off: 'unsubscribe' }, function(key, val) { jQuery[val] = function() { o[key].apply(o, arguments); }; }); })(jQuery); 观察者模式应用//订阅错误信息 $.subscribe('app.error', function(e, data) { alert('错误：' + data); }); //发布错误信息 $.ajax({ ..... error:function(){ $.publish('app.error','ajax请求错误！'); } }); //发布错误信息 if(!object){ $.publish('app.error','未找到对象！'); return false; }

JS监听页面键盘按下事件 document.onkeydown = function(e){ switch (e.which){ case 37: console.log('键盘左方向'); break; case 39: console.log('键盘右方向'); break; } }

JS判断页面是否滚动到底部 document.onscroll = function(e){ console.log((document.documentElement.scrollTop + document.body.scrollTop) == ($(document).height() - $(window).height())); //到底部返回true }

js获取URL参数 //function function getUrlParam(url, key) { var reg = new RegExp("(^|&|\\?)" + key + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = url.match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } //eg https://www.google.com/?gws_rd=ssl var res = getUrlParam('https://www.google.com/?gws_rd=ssl', 'gws_rd'); console.log(res); ==> print 'ssl'

js合并json数据 var json1 = { a:1, b:2 } var json2 = { c:3, d:4 } var json = mergeObject(json1, json2); //result { a:1, b:2, c:3, d:4 } function mergeObject(destination, source) { for (var property in source) destination[property] = source[property]; return destination; }

嵌入页面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);

使用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仿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; }

layer实现鼠标悬停tips方法 封装代码function hovertip(dom, text, direction, color) { dom.hover(function() { $tip(text, this, direction, color); }, function() { layer.closeAll('tips'); }); } // tip function $tip(text, dom, direction, color) { layer.tips(text, dom, { tips : [ direction ? direction : 3, color ? color : '#393D49' ] }); } 使用代码hovertip($('.main-menu li').has('.icon-off'), '退出登录', 1);

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; })();

网页返回顶部按钮功能怎么写 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 轻量级模块化框架