カウントダウン効果
事例分析
① このカウントダウンは常に変化するため、自動的に変化するにはタイマーが必要です（セット間隔) 注: Int の I は大文字の i! val の l は小文字の L です。長々と言わせてください。
② 時、分、秒は 3 つのブラック ボックスに保存されます。
③ 3 つの黒いボックスには、innerHTML を使用して、計算された時、分、秒が表示されます。
④ 初回実行もミリ秒間隔なので、更新直後はページが空白になります。
⑤ 最初にページを更新するときに空白の問題を防ぐために、関数を最初に 1 回呼び出すことができるように、関数をカプセル化する方法を採用するのが最善です。
⑥カウントダウンが終わると過去の情報が表示されます。
⑦ 最適化、タイマーのクリアクリアインターバル()。
効果図を実現します。
コード
基本構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-倒计时效果</title>
<style>
div {
margin: 200px;
}
div>span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
/* 倒计时已过小提示 先是隐藏的 */
.tisp {
display: none;
position: absolute;
top: 65px;
left: 25%;
width: 300px;
color: red;
background-color: skyblue;
line-height: 40px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<span class="hour">14</span>
<span class="minute">59</span>
<span class="second">14</span>
</div>
<span class="tisp">已过倒计时时间，下次尽早~</span>
</body>
</html>
新しい日付()
Date オブジェクト
Date オブジェクトは、日付と時刻を操作するために使用されます。
Date オブジェクトを作成します: new Date()
詳細については、Date - Javascript | MDN
を参照してください。JavaScript コード スニペットにはうんざりしているため、今回は学習した負荷を使用して本体の下で実行します。
コード：
// 以下的js语句将都会被放入到function(){}内
// 也就是function(){这里面！}
window.addEventListener('load', function(){
} )
整数を取得するためのカウントダウンをカプセル化するparseInt()関数を使用します
。全体の美しさのために、特に 3 項式を使用して 10 未満の数値に 0 を加算します。例 :
h = h < 10 ? '0' +時：時
コード：
window.addEventListener('load', function(){
//
var hour = document.querySelector('.hour') // 时
var minute = document.querySelector('.minute') // 分
var second = document.querySelector('.second') // 秒
// 设定目标时间格式：'YYYY-MM-DD HH:mm:ss'
var inputDate = +new Date('2022-09-23 16:54:00')
// 封装一个倒计时函数
function countDown(){
// 获取调用的时间戳
var nowData = +new Date()
// 目标时间 - 当前时间 / 1000 得到 剩余秒数
times = (inputDate - nowData)/1000
// 转化成时钟
var h = parseInt(times/60/60%24)
// 为了整体美观给10以下的数字补0
h = h < 10 ? '0' + h : h
hour.innerHTML = h
// 转化成分钟
var m = parseInt(times/60%60)
m = m < 10 ? '0' + m : m
minute.innerHTML = m
// 转化成秒钟
var s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
}
})
この時点で半分まで完了しましたが、実行時に一度しか実行されないため、タイマーを使用する必要があります。
タイマー - setInterval()
ウィンドウにはタイマーメソッドが2つあり、呼び出し時にウィンドウを省略できます遅延時間の単位はミリ秒1000ミリ秒=1秒で省略可能、省略した場合のデフォルトは0です。
①setTimeout(関数の実行、遅延時間)
1回だけ実行したい場合は、setTimeout②を選択します
。setInterval(実行関数、遅延時間)
関数を連続的に呼び出したい場合は setInterval を選択できますが、
カウントダウン関数を連続的に呼び出す必要があるため、ここでは setInterval を選択します。セット間隔カウントダウン効果を実現するには
コード：
// 开启定时器
// 给定时器加标识符（名字）方便后续调用
var timer = setInterval(countDown,1000)
設定された目標タイムは 2022-09-23 17:50:00 現在時刻によると、まだ 1 ～ 2 分残っています。達成できました！ただし、慎重な友人は、ランニングを開始したり、カウントダウン効果を更新したりすると、短い一時停止が発生することに気付きました。
問題のイメージ例:
この問題は、最初の実行もミリ秒間隔であるため、更新直後にページが空白になることが原因です。解決策は、タイマーを開始する前にカウントダウン関数を 1 回呼び出すことです。
// 加载页面时就调用一次防止有空白
countDown()
カウントダウンが終了しました
ユーザーにより良いエクスペリエンスを提供するために、カウントダウン効果を実装するだけでなく、別のプロンプトを追加することもできます。
サンプルコード:
// times是剩余的秒数
// 如果秒数小于0 即为已过倒计时时间，则隐藏时间，显示提示语
// 需要先去获取时间的div元素和提示的div元素
// 此代码片放置在倒计时函数countDown()的最后
if (times < 0) {
div.style.display = 'none'
tisp.style.display = 'block'
// 此处还有一句
} else {
div.style.display = 'block'
tisp.style.display = 'none'
}
レンダリングの例:
クリアタイマーの最適化 - clearInterval()
setInterval() タイマーは継続的に呼び出されると前述しましたが、時間が経過するとタイマーは停止すると考えられますか? いいえ、まだ電話中です。
上の写真です！
時間が経過してもタイマーが呼び出されているため、この場合はタイマーをクリアする必要があります。クリアインターバル()
先ほどタイマーに追加した名前もここで役立ちます。
サンプルコード:
// 此js代码片放置在判断剩余秒数是小于0内
clearInterval(timer)
コード例の図:
図を見てください。クリア タイマーが成功しています。カウントダウンが経過してもタイマーは呼び出されなくなります。
完全なコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>12-倒计时效果</title>
<style>
div {
margin: 200px;
position: absolute;
top: 65px;
left: 25%;
}
div>span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
.tisp {
display: none;
position: absolute;
top: 65px;
left: 25%;
width: 300px;
color: red;
background-color: skyblue;
line-height: 40px;
text-align: center;
font-size: 14px;
}
</style>
<script>
window.addEventListener('load', function(){
var hour = document.querySelector('.hour') // 时
var minute = document.querySelector('.minute') // 分
var second = document.querySelector('.second') // 秒
var div = document.querySelector('div')
var tisp = document.querySelector('.tisp')
// 你记得修改这个时间哟
var inputDate = +new Date('2022-09-23 18:31:00')
// 加载页面时就调用一次防止有空白
countDown()
// 开启定时器
var timer = setInterval(countDown,1000)
// 封装一个倒计时函数
function countDown(){
var nowData = +new Date()
times = (inputDate - nowData)/1000
var h = parseInt(times/60/60%24)
h = h < 10 ? '0' + h : h
hour.innerHTML = h
var m = parseInt(times/60%60)
m = m < 10 ? '0' + m : m
minute.innerHTML = m
var s = parseInt(times % 60)
s = s < 10 ? '0' + s : s
second.innerHTML = s
if (times < 0) {
div.style.display = 'none'
tisp.style.display = 'block'
clearInterval(timer)
} else {
div.style.display = 'block'
tisp.style.display = 'none'
}
}
})
</script>
</head>
<body>
<div>
<span class="hour">14</span>
<span class="minute">59</span>
<span class="second">14</span>
</div>
<span class="tisp">已过倒计时时间，下次尽早~</span>
</body>
</html>