JSでの2つのタイマーの使用法を簡単に説明します
setTimeout（）時限爆弾
- setTimeout（）を使用する場合は、期間を指定し、時間が経過している限り、バインドされた関数を直接実行します
setTimeout（）で2つのパラメーターを渡します
最初のパラメーター：イベントによって実行される関数
2番目のパラメーター：時間間隔は期間（ミリ秒単位）です
インスタンス
window.setTimeout(function(){
alert("hello");
},3000)
タイマー停止
stop timerメソッドは、setTimeout（）を呼び出すことによって以前に確立されたタイマーをキャンセルします。括弧内のパラメーターは、停止するタイマーのIDです。
文法
window.clearTimeout(参数);
setInterval（）アラームタイマー
- setInterval（）を使用する期間を指定し、この期間ごとにバインディング関数を呼び出します
setInterval（）で2つのパラメーターを渡します
最初のパラメーター：イベントによって実行される関数
2番目のパラメーター：時間間隔は期間（ミリ秒単位）です
インスタンス
var i=0;
window.setInterval(function(){
console.log(i);
i++;
},1000);
タイマー停止
stop timerメソッドは、setInterval（）を呼び出すことによって以前に確立されたタイマーをキャンセルし、パラメーターは停止するタイマーのIDです。
文法
window.clearInterval(参数)
注意：
- 関数をバインドするときは、メソッドパラメータの場所にコールバック関数（callback）を直接書き込むことができ、文字列「function name（）」を使用することもできます。関数名を直接書き込むこともできます。3つの呼び出しがあります。メソッドですが、文字の使用はお勧めしません。文字列メソッド
- ミリ秒単位の遅延は省略できます。デフォルトは0です。書き込みを行う場合は、ミリ秒にする必要があります。
- さらにタイマーがある場合は、各タイマーに識別子を付けることができます
ネイティブJSが元旦のカウントダウンを実現
今日は、元旦にカウントダウンするために学んだタイマーを使用します。
ナンセンスな話をやめて、ソースコードに直接アクセスしてください！
<!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>
私、シャオバイ、許してください！ご不明な点がございましたら、コメントをお待ちしております。時間内に修正いたします。