定时器
概念
定时器: 让一段代码延迟或者是间隔多长时间之后去执行一次
分类
延迟定时器
延迟定时器: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);
}