js重点函数的封装

封装函数通俗说就是把主要的代码放进一个函数中，找出可变化的值作为参数，然后他就像一个接口，可以随时随地调用啦

获取非行间样式

//第一步获取标签
var divs = document.getElementsByTagName('div')[0]

//第二步获取标签的宽度
var wid = getComputedStyle(divs).width
//低版本IE
var wid = divs.currentStyle.width

重点来了

function getStyle(elem, attr){//elem是标签元素，attr是样式名
//两个东西的兼容，对其中一个做判断，有就使用这一个，没有就用另一个
    if(elem.currentStyle){
        // 在IE中
        // .后边跟的是变量，使用[]代替
        var s = elem.currentStyle[attr];
    }else{
        // 在标准浏览器
        var s = getComputedStyle(elem)[attr];
    }
    // 返回需要的内容 以便于使用
    return s;
}

获取四位验证码

var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
    var code = ''; // 随机验证码
    for(var i = 1; i<=4; i++){ 
        var x = getRandom(0, str.length -1);//随机数
        // 拼接到code上
        code += str[x];
    }

没有可变化的值就不用设置形参啦

function getCode(){
 var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
 var code = ''; // 随机验证码
 for(var i = 1; i<=4; i++){
     var x = getRandom(0, str.length -1);
     // 拼接到code上
     code += str[x]; // str[随机下标] 
 }
 // 返回需要的内容
 return code;
}

运动函数

点击前进按钮元素前进，后退按钮就后退

  // 动画：开始 结束 步长
        var btn = document.getElementsByTagName('button');
        var divs = document.getElementsByTagName('div')[0];

        var timer = null; // 定时器必须得是全局的

        // 1.点击事件
        btn[0].onclick = function(){
            // 5.在定时器能被频繁添加的地方，先清除之前的，在开启新的
            clearInterval(timer);

            timer = setInterval(function(){
                // 3.计算运动值: 开始 + 步长
                var l = parseInt( getStyle(divs, 'left') ) + 10;

                // 4.到达目标值停止运动
                if(l >= 1000){
                    l = 1000; // 停在目标值
                    clearInterval(timer);  // 清除定时器
                }

                // 2.移动元素的位置 left
                divs.style.left = l + 'px';
            }, 30);
        }
    
        // 1.点击后退
        btn[1].onclick = function(){
            // 5.定时器开启之前先清除
            clearInterval(timer);

            timer = setInterval(function(){
                // 3.计算运动值：开始 - 步长
                var l = parseInt( getStyle(divs, 'left') ) - 10;

                // 4.到达目标值，停止运动
                if(l <= 0){
                    l = 0;
                    clearInterval(timer);
                }

                // 2.元素移动位置 left
                divs.style.left = l + 'px';
            }, 30)
        }

对比实现前进和后退的效果 代码并不完全相同 所以要做几个判断

  // var timer = null; // 必须是全局变量  破坏了函数的整体性、封装性
function move(elem, attr, step, target){
    // 6.判断步长正负值  (当前值 < 目标值 ? 正值 : 负值)
    var cur = parseInt( getStyle(elem, attr) );
    cur<target ? step = step : step = -step;

    // 5.定时器开启之前先清除
    clearInterval(elem.timer);

    // 7.把定时器作为元素的自定义属性添加
    elem.timer = setInterval(function(){
        // 3.计算运动值：开始 - 步长
        var l = parseInt( getStyle(elem, attr) ) + step;

        // 4.到达目标值，停止运动
        if( (step>0 && l>=target) || (step<0 && l<=target) ){
            l = target;
            clearInterval(elem.timer);
        }

        // 2.元素移动位置
        // .后边跟的是变量，使用[]代替
        elem.style[attr] = l + 'px';
    }, 30);
}

多多练习哦