1 //自动居中 - 浮层 ( el = Element) 2 function autoCenter(el) { 3 var bodyW = document.documentElement.clientWidth; //网页可视区域 4 var bodyH = document.documentElement.clientHeight; 5 var elW = el.offsetWidth; //弹层的宽度 6 var elH = el.offsetHeight; 7 el.style.left = (bodyW - elW) / 2 + 'px'; //实现居中 8 el.style.top = (bodyH - elH) / 2 + 'px'; 9 }
1 //元素充满浏览器全屏 2 function fillBody(el){ 3 el.style.width=document.documentElement.clientWidth+'px'; 4 el.style.height=document.documentElement.clientHeight+'px'; 5 }
//常用的事件函数 window.onresize=window.onload=function(){} window.onscroll=function(){}
1 //可视区域宽 2 function viewWidth(){ 3 return document.documentElement.clientWidth; 4 } 5 //可视区域高 6 function viewHeight(){ 7 return document.documentElement.clientHeight; 8 }
1 //判断element X Y是否出现了滚动条 2 var isScroll = function (el) { 3 // test targets 4 var elems = el ? [el] : [document.documentElement, document.body]; 5 6 var scrollX = false, scrollY = false; 7 8 for (var i = 0; i < elems.length; i++) { 9 10 var o = elems[i]; 11 12 // test horizontal 水平 13 14 var sl = o.scrollLeft; 15 16 o.scrollLeft += (sl > 0) ? -1 : 1; 17 18 o.scrollLeft !== sl && (scrollX = scrollX || true); 19 20 o.scrollLeft = sl; 21 22 // test vertical 垂直 23 24 var st = o.scrollTop; 25 26 o.scrollTop += (st > 0) ? -1 : 1; 27 28 o.scrollTop !== st && (scrollY = scrollY || true); 29 30 o.scrollTop = st; 31 } 32 33 // ret 34 35 return { 36 37 scrollX: scrollX, 38 39 scrollY: scrollY 40 41 }; 42 43 };
1 //js自动刷新 2 window.location.reload();
1 //设置属性和获取属性值 2 function attr(elem, name, value) { 3 var ret; 4 if (value) { 5 if (/msie [6-7]\.0/i.test(navigator.userAgent)) { 6 ret = elem.getAttributeNode(name); 7 if (!ret) { //ie6 7不合法的属性设置捕鸟,通过这里可以设置 8 ret = document.createAttribute(name); 9 elem.setAttributeNode(ret); 10 } 11 ret.nodeValue = value + ""; 12 } else { 13 elem.setAttribute(name, value); 14 } 15 return elem; 16 } else { //ie6 7有得属性获取不了 17 ret = elem.getAttribute(name); 18 fixIe = elem.getAttributeNode(name).nodeValue; 19 ret = ret ? ret : fixIe ? fixIe : undefined; 20 return ret; 21 } 22 }
1 //获取计算后的属性值 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 } 6 else{ 7 return getComputedStyle(obj,false)[attr]; 8 } 9 }
1 /* 2 参数说明:obj是被绑定元素, 3 event是绑定的事件, 4 fn是被绑定事件触发执行的函数, 5 false参数:按照事件冒泡的执行顺序进行的,true的话则按照事件捕获的执行顺序进行的。 6 */ 7 8 9 function bind(obj,eventname,fn){ 10 if(obj.addEventListener){ 11 obj.addEventListener(eventname,fn,false); 12 }else{ 13 obj.attachEvent("on"+eventname,function(){ 14 fn.call(obj); 15 }) 16 } 17 }
1 //获取滚动隐藏的高度兼容方法 2 function scroll(){ 3 if(window.pageYOffset!=null){//IE9+ 以及最新版本 4 return{ 5 top:window.pageYOffset, 6 left:window.pageXOffset 7 } 8 }else if(document.compatMode=='CSS1Compat'){//检测是否声明dtd 9 return{//支持IE 789 火狐 声明DTD的 10 top:document.documentElement.scrollTop, 11 left:document.documentElement.scrollLeft 12 } 13 }else{ 14 return{//没有DTD 只支持谷歌 15 top:document.body.scrollTop, 16 left:document.body.scrollLeft 17 } 18 } 19 }
1 //检测对象是否为数组 2 function isArray(obj){ 3 return Object.prototype.toString.call(obj)=="[object Array]"; 4 }
1 function format(format) { 2 var Time=new Date(); 3 var date = { 4 "M+": Time.getMonth() + 1, 5 "d+": Time.getDate(), 6 "h+": Time.getHours(), 7 "m+": Time.getMinutes(), 8 "s+": Time.getSeconds(), 9 "q+": Math.floor((Time.getMonth() + 3) / 3), 10 "S+": Time.getMilliseconds() 11 }; 12 if (/(y+)/i.test(format)) { 13 format = format.replace(RegExp.$1, (Time.getFullYear() + '').substr(4 - RegExp.$1.length)); 14 } 15 for (var k in date) { 16 if (new RegExp("(" + k + ")").test(format)) { 17 format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length)); 18 } 19 } 20 return format; 21 } 22 format('yyyy') //2018 23 format('yyyy-MM') // 2018-01 24 format('yyyy-MM-dd') // 2018-01-30 25 format('yyyy-MM-dd:h') // 2018-01-30:16 26 format('yyyy-MM-dd:hh:mm ss') // 2018-01-30:16:30 45
1 /*清除string前后的空格*/ 2 String.prototype.trim = function(){ 3 //方式一:将匹配到的每一个结果都用""替换 4 return this.replace(/(^\s+)|(\s+$)/g,function(){ 5 return ""; 6 }); 7 8 //方式二:和方式一的原理相同 9 return this.replace(/(^\s+)|(\s+$)/g,''); 10 }; 11 12 //获取匹配空格string.getTrimOffset() 13 String.prototype.getTrimOffset = function(){ 14 /** 15 * @param rs:匹配结果 16 * @param $1:第1个()提取结果 17 * @param $2:第2个()提取结果 18 * @param offset:匹配开始位置 19 * @param source:原始字符串 20 */ 21 var arr=[]; 22 this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){ 23 //arguments中的每个元素对应一个参数 24 arr.push(arguments); 25 }); 26 return arr; 27 }; 28 29 //实现函数escapeHtml,将<, >, &, " 进行转义 30 function escapeHtml(str) { 31 //匹配< > " & 32 return str.replace(/[<>"&]/g, function(rs) { 33 switch (rs) { 34 case "<": 35 return "<"; 36 case ">": 37 return ">"; 38 case "&": 39 return "&"; 40 case "\"": 41 return ""; 42 } 43 }); 44 } 45 //在字符串指定位置插入新字符串 46 String.prototype.insetAt = function(str,offset){ 47 48 //使用RegExp()构造函数创建正则表达式 49 var regx = new RegExp("(.{"+offset+"})"); 50 51 return this.replace(regx,"$1"+str); 52 };
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>input只能 输入数字 并且 可以退格 光标可以左右移动</title> 6 </head> 7 <body> 8 <input type="text" id="txt"> 9 </body> 10 <script> 11 var txt=document.getElementById('txt'); 12 txt.onkeydown=function(ev){ 13 var oEevent=ev||event; 14 console.log(oEevent.keyCode) 15 //数字keycode 49~57 左右 是37 39可以退格 16 if(oEevent.keyCode!=8 && oEevent.keyCode!=37 && oEevent.keyCode != 39 && (oEevent.keyCode<48||oEevent.keyCode>57)){ 17 return false; 18 } 19 } 20 </script> 21 </html>
1 /*封装方法-input框只能输入数字 输入框光标可以左右移动 可以backspace*/ 2 function onlyNumber(ele){ 3 if(ele.length===undefined){ 4 ele.onkeydown=function(ev){ 5 var oEevent=ev||event; 6 if(oEevent.keyCode!=8 && oEevent.keyCode!=37 && oEevent.keyCode != 39 && (oEevent.keyCode<48||oEevent.keyCode>57)) 7 return false; 8 } 9 }else{ 10 for(var i=0;i<ele.length;i++){ 11 ele[i].onkeydown=function(ev){ 12 var oEevent=ev||event; 13 if(oEevent.keyCode!=8 && oEevent.keyCode!=37 && oEevent.keyCode != 39 && (oEevent.keyCode<48||oEevent.keyCode>57)) 14 return false; 15 } 16 } 17 } 18 }
1 //获取样式 2 function getStyle(obj,attr){ 3 4 if (attr =='left') 5 { 6 return obj.offsetLeft; 7 } 8 else if (attr =='top') 9 { 10 return obj.offsetTop; 11 } 12 else if (attr =='width') 13 { 14 return obj.offsetWidth; 15 } 16 else if (attr =='height') 17 { 18 return obj.offsetHeight; 19 } 20 else 21 { 22 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; 23 } 24 }
1 //运动框架 2 3 function move(obj,attr,target,time,back){ 4 5 var startTime = new Date(); 6 var startVal = parseInt(getStyle(obj,attr)); 7 8 var timer = setInterval(function(){ 9 10 var nowTime = new Date(); 11 var moveVal = parseInt(target) - startVal; 12 13 var prop = (nowTime - startTime)/time; 14 if (prop>=1) 15 { 16 prop = 1; 17 clearInterval(timer); 18 if (PicIndex==PicLi.length-1) 19 { 20 PicIndexLast = 1; 21 back(); 22 objNum++; 23 if (objNum == 5) 24 { 25 PicIndex = 1; 26 objNum =0; 27 } 28 prop = NaN; 29 } 30 else if (PicIndex==0) 31 { 32 PicIndexLast = PicLi.length-2; 33 back(); 34 objNum++; 35 if (objNum == 5) 36 { 37 PicIndex = PicLi.length-2; 38 objNum =0; 39 } 40 prop = NaN; 41 } 42 } 43 obj.style[attr]=prop*moveVal+startVal+'px'; 44 },20) 45 46 }
1 (function(){ 2 //构造函数 3 function F(){ 4 //私有属性和方法放在构造函数里 5 } 6 //共享属性和方法放在原型属性(prototype)上 7 8 //共享属性 9 F.prototype.attr='共享属性'; 10 //共享方法 11 F.prototype.method=function(){ 12 13 }; 14 //F 的实例挂载在window下 15 window.f=new F(); 16 })(window,undefined)
1 (function(window.undefined){ 2 function G(){} 3 //dom操作 4 G.prototype.addClass=function(obj, sClass){ 5 var re=new RegExp('\\b'+sClass+'\\b'); 6 if(re.test(obj.className))return; 7 obj.className=(obj.className+' '+sClass).match(/\S+/g).join(' '); 8 return this; 9 } 10 G.prototype.removeClass=function(obj, sClass){ 11 var re=new RegExp('\\b'+sClass+'\\b', 'g'); 12 obj.className=obj.className.replace(re, '').replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' '); 13 return this; 14 } 15 G.prototype.removeSelfById=function(id){ 16 var obj=document.getElementById(id); 17 try{obj.parentNode.removeChild(obj);}catch(e){}; 18 return this 19 } 20 G.prototype.getByClass=function(oParent, sClass){ 21 var aEle=oParent.getElementsByTagName('*'); 22 var re=new RegExp('\\b'+sClass+'\\b', 'i'); 23 var aResult=[]; 24 for(var i=0;i<aEle.length;i++){ 25 if(re.test(aEle[i].className)){ 26 aResult.push(aEle[i]); 27 } 28 } 29 return aResult; 30 } 31 G.prototype.getEle=function(sExp, oParent){ 32 var This=this; 33 var aResult=[]; 34 var i=0; 35 oParent || (oParent=document); 36 if(oParent instanceof Array){ 37 for(i=0;i<oParent.length;i++)aResult=aResult.concat(getEle(sExp, oParent[i])); 38 }else if(typeof sExp=='object'){ 39 if(sExp instanceof Array){ 40 return sExp; 41 } 42 else{ 43 return [sExp]; 44 } 45 }else{ 46 //xxx, xxx, xxx 47 if(/,/.test(sExp)){ 48 var arr=sExp.split(/,+/); 49 for(i=0;i<arr.length;i++)aResult=aResult.concat(getEle(arr[i], oParent)); 50 } 51 //xxx xxx xxx 或者 xxx>xxx>xxx 52 else if(/[ >]/.test(sExp)){ 53 var aParent=[]; 54 var aChild=[]; 55 56 var arr=sExp.split(/[ >]+/); 57 58 aChild=[oParent]; 59 60 for(i=0;i<arr.length;i++){ 61 aParent=aChild; 62 aChild=[]; 63 for(j=0;j<aParent.length;j++){ 64 aChild=aChild.concat(getEle(arr[i], aParent[j])); 65 } 66 } 67 68 aResult=aChild; 69 } 70 //#xxx .xxx xxx 71 else{ 72 switch(sExp.charAt(0)){ 73 case '#': 74 return [document.getElementById(sExp.substring(1))][0]; 75 case '.': 76 return This.getByClass(oParent, sExp.substring(1)); 77 default: 78 return [].append(oParent.getElementsByTagName(sExp)); 79 } 80 } 81 } 82 return aResult; 83 } 84 G.prototype.getPos=function(obj){ 85 var res={l: 0, t: 0}; 86 while(obj){ 87 res.l+=obj.offsetLeft||0; 88 res.t+=obj.offsetTop||0; 89 obj=obj.offsetParent; 90 } 91 return res; 92 } 93 G.prototype.getStyle=function(obj,attr){ 94 //获取样式 95 if (attr =='left'){ 96 return obj.offsetLeft; 97 }else if (attr =='top'){ 98 return obj.offsetTop; 99 }else if (attr =='width'){ 100 return obj.offsetWidth; 101 }else if (attr =='height'){ 102 return obj.offsetHeight; 103 }else{ 104 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; 105 } 106 } 107 G.prototype.setStyle=function(obj, json){ 108 if(obj.length) 109 for(var i=0;i<obj.length;i++) setStyle(obj[i], json); 110 else{ 111 if(arguments.length==2) //json 112 for(var i in json) setStyle(obj, i, json[i]); 113 else{ //name, value 114 switch(arguments[1].toLowerCase()){ 115 case 'opacity': 116 obj.style.filter='alpha(opacity:'+arguments[2]+')'; 117 obj.style.opacity=arguments[2]/100; 118 break; 119 default: 120 if(typeof arguments[2]=='number'){ 121 obj.style[arguments[1]]=arguments[2]+'px'; 122 }else{ 123 obj.style[arguments[1]]=arguments[2]; 124 } 125 break; 126 } 127 } 128 } 129 } 130 131 //cookie方法 132 G.prototype.setCookie=function(name, value, iDay){ 133 if(iDay!==false){ 134 var oDate=new Date(); 135 oDate.setDate(oDate.getDate()+iDay); 136 document.cookie=name+'='+value+';expires='+oDate+';path=/'; 137 }else{ 138 document.cookie=name+'='+value; 139 } 140 } 141 G.prototype.getCookie=function(name){ 142 var arr=document.cookie.split('; '); 143 var i=0; 144 for(i=0;i<arr.length;i++){ 145 var arr2=arr[i].split('='); 146 if(arr2[0]==name){ 147 return arr2[1]; 148 } 149 } 150 return ''; 151 } 152 G.prototype.removeCookie=function(name){ 153 this.setCookie(name, 'a', -1); 154 } 155 156 //请求方法 157 G.prototype.json2url=function(json){ 158 var a=[]; 159 for(var i in json){ 160 var v=json[i]+''; 161 v=v.replace(/\n/g, '<br/>'); 162 v=encodeURIComponent(v); 163 a.push(i+'='+v); 164 } 165 return a.join('&'); 166 } 167 /* 168 options: 169 succ: function(json) 170 faild: function(str, err) 171 check: function(obj, name, value) 172 data: 额外的数据 173 */ 174 G.prototype.postForm=function(oForm, options){ 175 if(!options)options={}; 176 oForm.onsubmit=function (){ 177 var data={}; 178 var aEle=oForm.getElementsByTagName('*'); 179 for(var i=0;i<aEle.length;i++){ 180 var name=aEle[i].name; 181 var value=aEle[i].value; 182 if(name){ 183 if(aEle[i].type=='radio'){ 184 if(aEle[i].checked){ 185 if(options.check && options.check(aEle[i], name, value)==false)return false; 186 data[name]=value; 187 } 188 }else if(aEle[i].type!=undefined){ 189 if(options.check && options.check(aEle[i], name, value)==false)return false; 190 data[name]=value; 191 } 192 } 193 } 194 195 if(options.data){ 196 for(var i in options.data)data[i]=options.data[i]; 197 } 198 request(oForm.action, data, options.succ, options.faild); 199 return false; 200 }; 201 } 202 203 G.prototype.ajax=function(url, opt){ 204 var This=this; 205 opt =opt||{}; 206 opt.data =opt.data||{}; 207 opt.data.t =opt.data.t||new Date().getTime(); 208 opt.method =opt.method||'get'; 209 210 var oAjax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); 211 212 if(opt.method=='post'){ 213 oAjax.open('POST', url, true); 214 oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 215 try{ 216 oAjax.send(opt.data?This.json2url(opt.data):null); 217 }catch(e){} 218 }else{ 219 url+='?'+This.json2url(opt.data); 220 oAjax.open('GET', url, true); 221 try{ 222 oAjax.send(); 223 }catch(e){} 224 } 225 226 oAjax.onreadystatechange=function (){ 227 if(oAjax.readyState==4){ 228 if(oAjax.status==200){ 229 opt.fnSucc && opt.fnSucc(oAjax.responseText); 230 }else{ 231 opt.fnFaild && opt.fnFaild(oAjax.status); 232 } 233 } 234 }; 235 } 236 G.prototype.request=function(url, data, fnSucc, fnFaild){ 237 this.ajax(url, { 238 data: data, 239 fnSucc: function (str){ 240 //alert(str); 241 // document.write(str); 242 //document.getElementsByTagName('textarea')[0].value=str; 243 try{ 244 str=str.replace(/\n/g, ''); 245 var json=eval('('+str+')'); 246 }catch(e){ 247 fnFaild && fnFaild('parse error', -1); 248 249 //alert('你懂的:'+str); 250 var oDiv=document.getElementById('test_err_ndd'); 251 if(!oDiv){ 252 oDiv=document.createElement('div'); 253 document.body.appendChild(oDiv); 254 oDiv.style.display='none'; 255 } 256 257 oDiv.innerHTML+=str; 258 return; 259 } 260 261 if(json.error) 262 fnFaild&&fnFaild(json.desc, json.error); 263 else 264 fnSucc&&fnSucc(json); 265 }, 266 fnFaild: function (str){ 267 fnFaild&&fnFaild(str+'|'+url); 268 } 269 }); 270 } 271 G.prototype.drag=function(objEv, objMove, fnMoveCallBack){ 272 var disX=0,disY=0; 273 objEv.onmousedown=function (ev){ 274 var oEvent=ev||event; 275 disX=(document.documentElement.scrollLeft||document.body.scrollLeft)+oEvent.clientX-objMove.offsetLeft; 276 disY=(document.documentElement.scrollTop||document.body.scrollTop)+oEvent.clientY-objMove.offsetTop; 277 278 if(objEv.setCapture){ 279 objEv.onmousemove=fnMove; 280 objEv.onmouseup=fnUp; 281 objEv.setCapture(); 282 }else{ 283 document.onmousemove=fnMove; 284 document.onmouseup=fnUp; 285 return false; 286 } 287 }; 288 289 function fnMove(ev){ 290 var oEvent=ev||event; 291 var l=(document.documentElement.scrollLeft||document.body.scrollLeft)+oEvent.clientX-disX; 292 var t=(document.documentElement.scrollTop||document.body.scrollTop)+oEvent.clientY-disY; 293 294 fnMoveCallBack(l,t); 295 } 296 297 function fnUp(){ 298 this.onmousemove=null; 299 this.onmouseup=null; 300 if(this.releaseCapture)this.releaseCapture(); 301 } 302 } 303 G.prototype.mouseScroll=function(obj, fnCallBack){ 304 bindEvent(obj, 'mousewheel', fnScroll); 305 bindEvent(obj, 'DOMMouseScroll', fnScroll); 306 307 function fnScroll(ev){ 308 var oEvent=ev||event; 309 var bDown; 310 if(oEvent.wheelDelta){ 311 bDown=oEvent.wheelDelta<0; 312 }else{ 313 bDown=oEvent.detail>0; 314 } 315 fnCallBack(bDown); 316 if(oEvent.preventDefault)oEvent.preventDefault(); 317 return false; 318 } 319 } 320 G.prototype.move=function(obj,attr,target,time,back){ 321 var startTime = new Date(); 322 var startVal = parseInt(getStyle(obj,attr)); 323 var timer = setInterval(function(){ 324 var nowTime = new Date(); 325 var moveVal = parseInt(target) - startVal; 326 var prop = (nowTime - startTime)/time; 327 if (prop>=1){ 328 prop = 1; 329 clearInterval(timer); 330 if (PicIndex==PicLi.length-1){ 331 PicIndexLast = 1; 332 back(); 333 objNum++; 334 if (objNum == 5) 335 { 336 PicIndex = 1; 337 objNum =0; 338 } 339 prop = NaN; 340 }else if (PicIndex==0){ 341 PicIndexLast = PicLi.length-2; 342 back(); 343 objNum++; 344 if (objNum == 5){ 345 PicIndex = PicLi.length-2; 346 objNum =0; 347 } 348 prop = NaN; 349 } 350 } 351 obj.style[attr]=prop*moveVal+startVal+'px'; 352 },20) 353 } 354 G.prototype.formatDate=function(format){ 355 var Time=new Date(); 356 var date = { 357 "M+": Time.getMonth() + 1, 358 "d+": Time.getDate(), 359 "h+": Time.getHours(), 360 "m+": Time.getMinutes(), 361 "s+": Time.getSeconds(), 362 "q+": Math.floor((Time.getMonth() + 3) / 3), 363 "S+": Time.getMilliseconds() 364 }; 365 if (/(y+)/i.test(format)) { 366 format = format.replace(RegExp.$1, (Time.getFullYear() + '').substr(4 - RegExp.$1.length)); 367 } 368 for (var k in date) { 369 if (new RegExp("(" + k + ")").test(format)) { 370 format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length)); 371 } 372 } 373 return format; 374 } 375 G.prototype.onLoad=function(){ 376 var loaded=false; 377 var added=false; 378 var arr=[]; 379 function init(){ 380 if(loaded)return; 381 loaded=true; 382 for(var i=0;i<arr.length;i++){ 383 arr[i](); 384 arr=null; 385 } 386 } 387 388 return function (fn){ 389 if(loaded)return fn(); 390 arr.push(fn); 391 if(added)return; 392 //开始加载 393 //chrome 394 if(document.addEventListener)document.addEventListener('DOMContentLoaded', init, false); 395 else{ 396 document.attachEvent('onreadystatechange', function (){ 397 if(document.readyState=='complete'){ 398 init(); 399 } 400 }); 401 } 402 //其他连defer都不支持的 403 window.onload=init; 404 added=true; 405 }; 406 } 407 G.prototype.bindEvent=function(obj, ev, fn){ 408 obj.addEventListener?obj.addEventListener(ev, fn, false):obj.attachEvent('on'+ev, fn); 409 } 410 G.prototype.unbindEvent=function(obj, ev, fn){ 411 obj.removeEventListener?obj.removeEventListener(ev, fn, false):obj.detachEvent('on'+ev, fn); 412 } 413 window.g=new G(); 414 })(window,undefined)
1 function isIE() { 2 if (!!window.ActiveXObject || "ActiveXObject" in window) 3 return true; 4 else 5 return false; 6 }
方法还有继续收集,如有不好之处敬请留言指出,如果你也有收集的方法或是自己封装写的欢迎留言分享,总有一句话会让你我强大,好东西得分享!_!