JavaScript中定时器以及Math的运用和函数的封装

一、定时器

在JavaScript中提供了两种方案来实现计算器

1.setTimeout

延迟执行（延迟指定时间之后，执行代码一次）

用法：

setTimeout(代码,时间);// 时间单位：毫秒

案例：

       //用法一：
	   setTimeout(show, 3000);//不能使用 show()作为参数
	   //用法二：
	   setTimeout("show()",1000);

        function show() {
            var sum = 0;
            for (var i = 0; i < 10; i++) {
                sum += i;
            }
            console.log(sum);
        }
	//用法三：
        setTimeout(function () {
            console.log('hello world');
        }, 1000);

注意：若使用定时器执行函数，应该将函数名传递给定时器。

2.setInterval()

间歇性执行(每隔固定时间，执行代码一次)

用法：

setInterval(代码,时间);//毫秒

3.清除定时器

clearTimeout(t)

clearInteval(t)

注意：setTimeout和setInterval都会返回一个唯一的标识id

综合案例：自动切换图片，鼠标经过停止切换，离开继续切换

    var t = setInterval(move, 2000);

    pic.onmouseover = function () {
        clearInterval(t);
    };

    pic.onmouseout = function () {
        // t = setInterval(function () {
        //     index++;
        //     // console.log(index);
        //     // index = index == len ? 0 : index;
        //     pic.src = arr[index % len];
        // }, 2000)
        t = setInterval(move, 2000);
    };


    function move() {
        index++;
        // console.log(index);
        // index = index == len ? 0 : index;
        pic.src = arr[index % len];
    }

二、Math

JavaScript内置了Math对象，用于处理数学任务。

常见的属性：

​ PI

常见的方法：

• abs(num) 绝对值
• ceil(num) 向上舍入
• floor(num) 向下舍入
• round(num) 四舍五入
• max(num1,num2,…) 求最大值
• min(num1,num2,…) 求最小值
• pow(x,y) x的y次幂
• sqrt(x) x的平方根
• random() 0-之间的随机数

公式：

1)求0-x之间的随机整数： Math.floor( Math.random()*x);

2)求x-y之间的随机整数：Math.floor(Math.random()*(y-x)+x)

案例：随机生成四位验证码

        var str = "abcdefghijklmnopqrstuvwxyzABCEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        //产生四位验证码 包含数字或字母组成

        //随机从字符串中字符     索引
        // var s = '';
        // for (var i = 0; i < 4; i++) {
        //     var index = Math.floor(Math.random() * str.length);
        //     s += str[index];
        // }

三、函数的封装(运动封装)

//target  终点位置
//step     每次的移动距离
//obj       移动的目标对象
//attr      动画过程中修改的属性
function move(obj, target, step, attr) {
    //根据起点和终点之间的关系，判定速度的正负
    step = parseFloat(getComputedStyle(obj, null)[attr]) > target ? -step : step;//起点>终点?
    clearInterval(obj.timer);//清除
    obj.timer = setInterval(function () {
        var l = parseFloat(getComputedStyle(obj, null)[attr]);//当前的div的属性值
        var speed = l + step;//  +5  +(-5)      每一次移动到的位置
        //到达边界时，
        if (speed >= target && step > 0 || speed <= target && step < 0) {
            clearInterval(obj.timer);
            speed = target;//边界值
        }
        obj.style[attr] = speed + "px";
    }, 20);
}