24 定时器、write、Math

24 定时器、write、Math

定时器

概念

定时器: 让一段代码延迟或者是间隔多长时间之后去执行一次

分类

延迟定时器

延迟定时器：setTimeout(函数, 时间) 时间：毫秒 ms 1s = 1000ms

让一段代码在等待一段时间执行一次

一次性广告 关不掉的广告

setTimeout(function(){
    console.log(this); // window
    console.log(1);
}, 3000);
​
setTimeout(mm, 3000);
function mm(){
    console.log(2);
}

间隔定时器

间隔定时器：setInterval(函数, 时间) 单位：ms

让一段代码 每隔多长时间执行一次

轮播图 倒计时 计时器

var n = 0;
// 0---10
setInterval(function(){
    console.log(n);
    n++;
    if(n >= 10){
        n = 10;
    }
}, 1000);

清除定时器

每个定时器开启后，就会返回一个值, 就是定时器的唯一标识

var 变量 = setTimeout/setInterval(函数, 时间);

清除定时器：

setTimeout: clearTimeout(timerid)

setInterval: clearInterval(timerid)

clear只清除定时器 后续代码会继续执行 直接关掉了当前的定时器 后续找不到这个定时器

var n = 5;
// 倒计时：每隔1s更新一次时间
var id = setInterval(function () {
    console.log(n);
    n--;
    if (n <= 0) {
        clearInterval(id);
        console.log(n, '阻断测试');
    }
    // 赋值给body
    document.body.innerHTML = n;
}, 1000);
​
console.log(id, 'id-----');

write

document.write:

write(内容): 只能操作body

不会覆盖自身添加的内容

可以识别标签

document.body.innerHTML:

innerHTML:

可以所有的闭合标签

会覆盖自身的内容

可以识别标签

// document.write('哈哈哈哈哈');
var n = 10;
// 倒计时：每隔1s更新一次时间
setInterval(function(){
    console.log(n);
    n--;
    if(n <= 0) n = 0;
    // 赋值给body
    document.body.innerHTML = n;
    // document.write(n + '<br>');
}, 1000);

Math

var arr = ['刘志远', '雷吕能', '万策', '爱因斯坦', '霍金', '王如雪', '特斯拉', '肖梦飞'];
// 描述: 进入页面  让div的内容 从 arr 中随机取值
// 获取元素
var div = document.getElementsByTagName('div')[0];
// 不间断的更新
var timerId = setInterval(function(){
    // 让div的内容 从 arr 中随机取值
    // 下标   随机下标  0---arr.length
    var num = Math.floor(Math.random() * arr.length);
    console.log(num, arr[num]);
    // 赋值给div的内容
    div.innerHTML = arr[num];
}, 10);
​
// 点击确定按钮  停止定时器 清除
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
    clearInterval(timerId);
}