Briefly describe the usage of two timers in JS
setTimeout() time bomb
- When setTimeout() is used, specify a time period, as long as the time is up, directly execute the bound function
Pass two parameters in setTimeout()
The first parameter: the function executed by the event
The second parameter: the time interval is the time period (in milliseconds)
Instance
window.setTimeout(function(){
alert("hello");
},3000)
Stop timer
The stop timer method cancels the timer previously established by calling setTimeout(). The parameter in brackets is the identifier of the timer to be stopped
grammar
window.clearTimeout(参数);
setInterval() alarm timer
- Specify a time period when setInterval() is used, and then call the binding function every this time period
Pass two parameters in setInterval()
The first parameter: the function executed by the event
The second parameter: the time interval is the time period (in milliseconds)
Instance
var i=0;
window.setInterval(function(){
console.log(i);
i++;
},1000);
Stop timer
The stop timer method cancels the timer previously established by calling setInterval(), and the parameter is the identifier of the timer to be stopped
grammar
window.clearInterval(参数)
note:
- When binding a function, the callback function (callback) can be directly written at the location of the method parameter, and the string "function name()" can also be used. You can also write the function name directly. There are three calling methods, but the use of characters is not recommended. String method
- The delay in milliseconds can be omitted, the default is 0, if you want to write, it must be milliseconds
- If there are more timers, you can give each timer an identifier
Native JS realizes New Year's Day countdown
Today we use the timer we have learned to count down on New Year's Day.
Stop talking nonsense, go directly to the source code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元旦倒计时</title>
<!-- css样式 -->
<style>
* {
margin: 0px;
padding: 0px;
}
div {
width: 800px;
height: 250px;
border: 1px solid skyblue;
margin: 50px auto;
}
p {
font-size: 45px;
color: tomato;
text-align: center;
}
span {
display: inline-block;
height: 60px;
font-size: 45px;
}
.day {
margin-left: 150px;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div>
<p>元旦倒计时</p>
<p>距离元旦还有:</p>
<span class="day">0</span>
<span>天</span>
<span class="hour">0</span>
<span>小时</span>
<span class="minute">0</span>
<span>分钟</span>
<span class="second">0</span>
<span>秒</span>
</div>
<script>
// js实现功能
window.onload = function () {
// 获取页面元素
var day = document.querySelector(".day")
var hour = document.querySelector(".hour")
var minute = document.querySelector(".minute")
var secondy = document.querySelector(".second")
// 定义计时器
window.setInterval(fun, 1000)
// 计时器绑定事件
function fun() {
// 定义元旦时间的时间戳
// 注意:这里是2021年的元旦,如果想要别的日期的话,可以自己设置
var time = +new Date("2021,1,1")
// 定义当前的时间的时间戳
var tim = +new Date()
// 用元旦时间的时间戳减去当前的时间的时间戳就是倒计时的毫秒数
var num = time - tim
// 分别计算出天,小时,分钟,秒等数据
var d = parseInt(num / 1000 / 60 / 60 / 24);
var h = parseInt(num / 100 / 60 / 60 % 24);
var m = parseInt(num / 100 / 60 % 60);
var s = parseInt(num % 60);
// 分别赋值(每隔一秒获取赋值一次)
day.innerText = d
hour.innerText = h
minute.innerText = m
secondy.innerText = s
}
}
</script>
</body>
</html>
I, Xiaobai, forgive me! If you have any questions, you are welcome to comment, and I will correct it in time!