标签：小小 attr elem param js speed day cur

小小js库

代码如下

var Jser-bk = (function () {

   /*
    * 通过id名获取标签
    * @param {参数类型} 参数名 对应的值
    * @param {string} id  id名
    * */
   function getId(id) {
       return document.getElementById(id);
   }

   /*
    * 获取元素样式
    * @param {object} elem 元素
    * @param {string} attr 属性名
    * */
   function getStyle(elem,attr) {
       return elem.currentStyle ? elem.currentStyle[attr] :getComputedStyle(elem)[attr];
   }

   /*
    * 运动函数
    * @param {object} elem 元素
    * @param {string} attr 属性名
    * @param {number} step 步长
    * @param {number} target 目标值
    * */
   function run(elem,attr,step,target) {
       //当前值0   <    目标500  +
       var cur = getStyle(elem, attr) === "auto"?0:parseInt(getStyle(elem, attr));
       step = cur < target ? step : -step;
       clearInterval(elem.timer); //
       elem.timer = setInterval(function () {
           //ie 默认定位值是auto
           var cur = getStyle(elem, attr) === "auto"?0:parseInt(getStyle(elem, attr));
           var speed = cur + step;
           if((speed >= target && step > 0) || (speed <= target && step < 0)){ //右
               speed = target;
               clearInterval(elem.timer);
           }
           elem.style[attr] = speed + "px";
       },30);
   }

   /*
    * 补0,不够2位的，前面补0
    * @param {number} data 数值
    * */
   function toTwo(data) {
       return data.toString().length<2? "0"+data : data;
   }


   /*
    * 生成n位验证码
    * @param {number} n 位数
    * */

   function yz(n) {
       var str ="1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
       var s = "";
       for(var i = 0;i<n;i++){
           s += str[parseInt(Math.random()*str.length)];
       }
       return s;
   }


   /*
    * 事件绑定
    * @param {object} elem 添加事件的元素
    * @param {string} type 事件类型
    * @param {function} fun 事件处理函数
    * */
   function bind(elem,type,fun) {
       if(elem.attachEvent){
           elem.attachEvent("on"+type,fun);
       }else {
           elem.addEventListener(type,fun);
       }
   }

   /*
    * 缓冲运动
    * @param {object} elem 添加事件的元素
    * @param {object} obj  属性的json对象
    * @param {function} fun  回调函数
    * */
   function bufferMove(elem,obj,fun) {//obj = {"width":500,"height":500}
       clearInterval(elem.timer);
       elem.timer = setInterval(function () {
           var tag = true; //假设true，全部到了目标点， 但凡有一个没有到，false
           for(var attr in obj){ //attr : width  height
               //1.在当前值的基础上 + 速度
               var cur = attr === "opacity"? parseInt(getStyle(elem,attr)*100): parseInt(getStyle(elem,attr));

               //2.计算速度
               var speed = (obj[attr]-cur)/10;

               //4.速度取整
               speed = speed >= 0 ? Math.ceil(speed) : Math.floor(speed);

               //3.停止定时器
               if(cur != obj[attr]){
                   tag = false;
               }
               if(attr === "opacity"){
                   elem.style[attr] = (cur + speed)/100;
                   elem.style.filter =  "filter: alpha(opacity="+(cur + speed)+")";
               }else{
                   elem.style[attr] = cur + speed + "px";
               }
           }
           if(tag){
               clearInterval(elem.timer);
               fun&&fun(); //两真为真，如果第一个为真，判断第二个，如果第一个为假，第二就不会再判断
           }
       },30);
   }


   /*
    * 存储cookie
    * @param {string} key ：名
    * @param {string} value ：值
    * @param {number} day ：过期时间 单位天
    * * */
   function setCookie(key,value,day) {
       var oDate = new Date();
       day = day ? day : 7; //day如果有值  就使用day  没有默认为7
       oDate.setDate(oDate.getDate()+day);
       document.cookie = key+"="+value+";expires="+oDate;
   }

   /*
    * 获取cookie
    * @param {string} key ：名
    * * */
   function getCookie(key){
       var cookie = document.cookie.split("; ");
       var obj = {};
       for(var i = 0;i<cookie.length;i++){
           var c = cookie[i].split("=");
           obj[c[0]] = c[1]
       }
       return obj[key];
   }

   /*
    * 删除cookie
    * @param {string} key ：名
    * * */
   function removeCookie(key) {
       setCookie(key,1,-1);
   }

   /*
   * ajax请求
   * @param {object} reqMes ：请求信息
   * */
   function ajax(reqMes){
       //1.创建对象
       var request = new XMLHttpRequest(); //非ie6的创建
       //new ActiveXObject("Microsoft.XMLHTTP")//ie6的创建

       //2.建立连接
       if(reqMes.type.toLowerCase() === "get"){
           //如果有请求参数，就拼接到url后面，如果没有就不拼
           reqMes.url  = reqMes.data ? reqMes.url+"?"+reqMes.data : reqMes.url;
           request.open("get",reqMes.url,true);
           request.send();
       }else{
           request.open("post",reqMes.url,true);
           reqMes.data ? request.send(reqMes.data): request.send();
       }

       //4.监听状态
       request.onreadystatechange = function () {
           if(request.readyState === 4){
               if(request.status === 200) {
                   reqMes.success(JSON.parse(request.responseText));
               }
           }
       }
   }
   return {
       "getId":getId,
       "getStyle":getStyle,
       "run":run,
       "toTwo":toTwo,
       "yz":yz,
       "bind":bind,
       "bufferMove":bufferMove,
       "setCookie":setCookie,
       "getCookie":getCookie,
       "removeCookie":removeCookie,
       "ajax":ajax
   }
})();

标签：小小,attr,elem,param,js,speed,day,cur
来源： https://blog.csdn.net/qq_43769553/article/details/101226795

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。