倒计时效果
案例分析
① 这个倒计时时不断变化的,因此需要定时器来自动变化(setInterval) 注意:Int的I是i的大写! val的l是小写的L。容我啰嗦一句。
② 三个黑色盒子里面分别存放时分秒。
③ 三个黑色盒子利用innerHTML放入计算的小时分钟秒数。
④ 第一次执行也是间隔毫秒数,因此刚刷新页面会有空白。
⑤ 最好采取封装函数的方式,这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题。
⑥ 过了倒计时后提示已过信息。
⑦ 优化,清除定时器clearInterval()。
实现效果图:
代码实现
基本构架
<!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>
new Date()
Date 对象
Date 对象用于处理日期与时间。
创建 Date 对象: new Date()
详情可浏览:Date - Javascript | MDN
由于受够了JavaScript代码片在body下方这次用学习到的load来做
代码实现:
// 以下的js语句将都会被放入到function(){}内
// 也就是function(){这里面!}
window.addEventListener('load', function(){
} )
我用封装一个倒计时的函数
parseInt()是得到一个整数
为了整体美观特地使用三元表达式给10以下的数字补0显示
例:h = h < 10 ? ‘0’ + h : h
代码实现:
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()
在window中有两种定时器方法,在调用时都可以省略window,这个延时时间单位是毫秒 1000毫秒 = 1秒,可以省略,省略则是默认的是0。
① setTimeout(执行函数,延时时间)
如果你只想执行一次可以选择setTimeout
② setInterval(执行函数,延时时间)
如果你想不停地调用函数可以选择setInterval
我们需要不停的调用倒计时函数所以我们选择setInterval来实现倒计时效果
代码实现:
// 开启定时器
// 给定时器加标识符(名字)方便后续调用
var timer = setInterval(countDown,1000)
设定目标时间是 2022-09-23 17:50:00 据目前时间还有一两分钟的样子。我们实现啦!不过 细心的朋友就发现,我们开始运行或刷新倒计时效果时会有短暂的静止时间
问题示例图:
这个问题是因为我们第一次执行也是间隔毫秒数,因此刚刷新页面会有空白。解决方法可以才开启定时器之前就调用一次倒计时函数。
// 加载页面时就调用一次防止有空白
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()定时器会不停调用,我们以为时间到了它就也休息了吗?不,它还在调用。
上图!
即使时间已过,定时器仍在调用,这些时候我们需要清除定时器。clearInterval()
我们前面给定时器加的名字在这里也有用处啦。
示例代码:
// 此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>