我要评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 时分秒分别显示 -->
<span>00:</span>
<span id="minute"></span>
<span>:</span>
<span id="seconds"></span>
<script>
window.onload = function(){
// 1. 获取分/秒待填充元素
var minuteEle = document.getElementById("minute")
var secondsEle = document.getElementById("seconds")
// 2. 设置初始值
var minute = 4;
var seconds = 60;
var time
// 3. 如果在session里面能取到值，说明页面是刷新的，直接获取值
if(sessionStorage.getItem("countDown")){
time = sessionStorage.getItem("countDown")
// 3.1 获取现在的时间，用设置的倒计时时长 - 现在时间 = 还剩时长
var time1 = new Date().getTime()
minute = 4 - Math.floor((time1 - time) / 1000 / 60) //分
seconds = 60 - Math.floor((time1 - time) / 1000 % 60) //秒
}else{
// 4. 否则获取当前时间作为开始时间，并存入session
time = new Date().getTime()
sessionStorage.setItem('countDown',time)
}
// 5. 设置计时器
var timer = setInterval(function(){
// 5.1 如果上一次秒是‘00’=> 04:00 本次直接为03:59
if(seconds == '00' && minute > 0){
seconds = 59;
minute--
}else{
// 5.2 否则直接秒数减一
seconds--;
}
// 5.3 如果秒为0-9 则拼接为 ‘08’
if(seconds >= 0 && seconds < 10){
seconds = '0' + Number(seconds)
}
// 5.4 如果分为0-9 则拼接为 ‘04’
if(minute >= 0 && minute < 10){
minute = '0' + Number(minute)
}
// 5.5 将分秒填充进元素显示
secondsEle.innerHTML = seconds
minuteEle.innerHTML = minute
// 5.6 00:00 倒计时结束，清除计时器
if(minute == 0 && seconds == 0){
clearInterval(timer)
}
},1000)
}
</script>
</body>
</html>
第0001天：学习打卡。
本文地址：https://blog.csdn.net/BettermEJS/article/details/107396855
如对本文有疑问， 点击进行留言回复！！
网友评论