javaScript:快乐学习计时器
目录
一.前言
二.计时器
1.计时器的分类
2. 创建计时器的方式
创建间隔计时器
创建方式三种
1.匿名函数
2.使用函数直接作为计时器的执行函数
2.使用函数直接作为计时器的执行函数,用字符串的形式写入
3.计时器的返回值
4.清除计时器
5.延迟计时器
相关代码
一.前言
在 JavaScript 中，计时器（Timer）是一种用于执行定时任务的机制。它允许你在指定的时间间隔执行代码或者在一定延迟后执行代码。JavaScript 提供了两种主要的计时器函数：setTimeout 和 setInterval。
二.计时器
1.计时器的分类
计时器分为两种
间隔计时器：设置每隔多久执行一次操作或者函数
延迟计时器：设置延迟多久才执行操作或者函数
2. 创建计时器的方式
创建间隔计时器
使用方法是 setInterval()
参数有两个
参数1：执行的函数
参数2：时间间隔，单位是ms，1s = 1000ms
let num = 10
// 赛t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除计时器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);
创建方式三种
1.匿名函数
setInterval(function(){
//code
},1000)
2.使用函数直接作为计时器的执行函数
function show(){}
setInterval(show,1000);
2.使用函数直接作为计时器的执行函数,用字符串的形式写入
function show(){}
setInterval('show()',1000);
3.计时器的返回值
计时器的返回值，返回值是当前浏览器分配给计时器的编号，谷歌从1开始火狐从2开始，edge是从1开始
4.清除计时器
清除计时器：
清除间隔计时器
clearInterval（计时器对应的编号）
let num = 10
// 赛t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除计时器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);5.延迟计时器
延迟计时器
setTimeout(function(){
//code
},1000)
含义是1s之后再执行函数中的代码（执行一次就完了，一般不清除
清除延迟计时器，一般不清除
clearTimeout（计时器对应的编号）
//延时计时器
btn.onclick = function(){setTimeout(function(){alert('计时器不好玩')},1000)
}相关代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计时器</title><style>*{margin: 0;padding: 0;}#time{width: 200px;height: 30px;text-align: center;line-height: 30px;border: 1px #f00 solid;font-size: 20px;}</style>
</head>
<body><p id="time">10</p><button id="start">点击开始</button><button id="stop1">点击停止倒计时</button><button id="btn">点击一秒后弹出</button>
</body>
</html>
<script>
/*
计时器
1.属于BOM中的内容
2.计时器分为两种间隔计时器：设置每隔多久执行一次操作或者函数延迟计时器：设置延迟多久才执行操作或者函数
3.创建计时器的方式创建间隔计时器使用方法是 setInterval()参数有两个参数1：执行的函数参数2：时间间隔，单位是ms，1s = 1000ms创建方式三种1.匿名函数setInterval(function(){//code},1000)2.使用函数直接作为计时器的执行函数function show(){}setInterval(show,1000);2.使用函数直接作为计时器的执行函数,用字符串的形式写入function show(){}setInterval('show()',1000);计时器的返回值，返回值是当前浏览器分配给计时器的编号，谷歌从1开始火狐从2开始，edge是从1开始计时器函数里面的变量，属于局部变量，因此外面的操作不能直接操作计时器内部的变量，可以理解为外部的操作不会对计时器内部照成影响清除计时器： 清除间隔计时器clearInterval（计时器对应的编号）延迟计时器setInterval(function(){//code},1000)含义是1s之后再执行函数中的代码（执行一次就完了，一般不清除清除延迟计时器，一般不清除clearTimeout（计时器对应的编号）
*/
let num = 10
// 赛t in t 沃
let n = null
let timern = setInterval(function(){num--time.innerHTML = num//清除计时器if (num <=0) {clearInterval(n)}
},1000)
console.log(n,num);//点击停止倒计时
stop1.onclick = function(){clearInterval(n)
}function show(){let r = Math.floor(Math.random()*256)let g= Math.floor(Math.random()*256)let b = Math.floor(Math.random()*256)time.style.background = `rgb(${r},${g},${b})`
}
start.onclick = function(){//在使用前先清除，防止计时器累计clearInterval(timer)timer = setInterval(show,1000)
}//延时计时器
btn.onclick = function(){setTimeout(function(){alert('计时器不好玩')},1000)
}
</script>