原生JS的封装
程序员文章站
2022-03-29 21:06:13
原生JS的封装
/**
* 原生JS的封装
* version:1.0
* date:2017/6/12
* author:GYunZhi
*/
/...
原生JS的封装
/** * 原生JS的封装 * version:1.0 * date:2017/6/12 * author:GYunZhi */ //模拟jquery的$符选择器 function $(v){ if(typeof v==='function'){ window.onload=v; }else if(typeof v==='string'){ return document.getElementById(v); }else if(typeof v==='object'){ return v; } }; //完美版getByClass函数 function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var re=new RegExp('\\b'+sClass+'\\b', 'i');// /b单词边界 var i=0; for(i=0;idocument.documentElement.clientWidth-obj.offsetWidth){ L=document.documentElement.clientWidth-obj.offsetWidth; }else if(T<0){ T=0; }else if(T>document.documentElement.clientHeight-obj.offsetHeight){ T=document.documentElement.clientHeight-obj.offsetHeight; } obj.style.left=L + 'px'; obj.style.top=T + 'px'; if (obj.releaseCapture) { obj.releaseCapture(); } } document.onmouseup=function (){ document.onmousemove=null; } return false; } }; /* 封装ajax函数 method:数据提交方式 url:接口 data:提交的数据 success:对服务器返回的数据进行处理的函数 */ function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //get提交方式 if (method == 'get' && data) { url += '?' + data; } //post提交方式 xhr.open(method,url,true); if (method == 'get') { xhr.send(); } else { //设置请求头 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.send(data); } xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { //获取数据之后对数据进行处理,如果存在就执行 success && success(xhr.responseText); } else { alert('出错了,Err:' + xhr.status); } } } } /* 运动函数的封装 obj:元素 json:指定属性和属性值 fn:回调函数 */ //getComputedStyle与currentStyle兼容性方案 function getStyle(obj,attr){ //通过属性筛选实现兼容性方案(false 兼容旧版ff) return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]; } function startMove(obj,json, fn) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; //这一次运动就结束了――所有的值都到达了 for(var attr in json) { //1.取当前的值 var iCurrent=0; if(attr=='opacity') { iCurrent=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCurrent=parseInt(getStyle(obj, attr)); } //2.计算运动速度 var iSpeed=(json[attr]-iCurrent)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //3.检测停止 if(iCurrent!=json[attr]) { bStop=false; } if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCurrent+iSpeed)+')'; obj.style.opacity=(iCurrent+iSpeed)/100; } else { obj.style[attr]=iCurrent+iSpeed+'px'; } } //宽高等于指定宽高时,运动停止 if(bStop) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) }
下一篇: Html 5 坦克大战(韩顺平版本)
推荐阅读
-
无阻塞加载js,防止因js加载不了影响页面显示的问题
-
《Node.js项目实践:构建可扩展的Web应用》
-
6月读书活动之《Node.js项目实践:构建可扩展的Web应用
-
谈谈JS中常遇到的浏览器兼容问题和解决方法
-
完美解决JS文件页面加载时的阻塞问题
-
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
-
微信如何实现向浏览器注入JS API,并且调用方式就像浏览器原生API一样?
-
解决3.01版的jquery.form.js中文乱码问题的解决方法_jquery
-
php-js如何将canvas生成的图像保存为图片,放到指定位置
-
js拖动div 当鼠标移动时整个div也相应的移动_javascript技巧