提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
今天写一个倒计时案例
一、案例思路
- 倒计时是不断变化的,因此需要定时器来完成自动变化的效果;
- 写一个countDown()倒计时函数,用innerHTML在四个盒子里 放入对应的时间,分别对应为天、时、分、秒;
- 先调用countDown()倒计时函数,防止刚开始刷新页面出现空白。
二、代码
html代码
<body>
<div class="countdown">
<span class="number" id="days">00</span>
<span class="label">天</span>
<span class="number" id="hours">00</span>
<span class="label">小时</span>
<span class="number" id="minutes">00</span>
<span class="label">分钟</span>
<span class="number" id="seconds">00</span>
<span class="label">秒</span>
</div>
</body>
css代码
<style>
.countdown {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
font-weight: bold;
}
.number {
display: inline-block;
width: 3rem;
height: 3rem;
line-height: 3rem;
text-align: center;
background-color: #000;
color: #fff;
border-radius: 0.5rem;
margin: 0 0.5rem;
}
.label {
margin: 0 0.5rem;
}
</style>
js代码
<script>
//获取元素
var days = document.getElementById('days');
var hours = document.getElementById('hours');
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
var inputTime = +new Date('2023-4-9 18:54:00'); //返回用户输入时间的总毫秒数
countDown();
//开启定时器
setInterval(countDown, 1000);
//倒计时
function countDown(time) {
var nowTime = +new Date(); //当前系统时间总毫秒数
var times = (inputTime - nowTime) / 1000; //剩余时间总毫秒数
//天
var day = parseInt(times / 60 / 60 / 24);
day = day < 10 ? '0' + day : day;
days.innerHTML = day;
//时
var hour = parseInt(times / 60 / 60 % 24);
hour = hour < 10 ? '0' + hour : hour;
hours.innerHTML = hour;
//分
var minute = parseInt(times / 60 % 60);
minute = minute < 10 ? '0' + minute : minute;
minutes.innerHTML = minute;
//秒
var second = parseInt(times % 60);
second = second < 10 ? '0' + second : second;
seconds.innerHTML = second;
}
</script>
效果如下图所示:
总结
本次案例主要就是将剩余的时间分别给天、时、分、秒四个盒子,然后每隔一秒钟调用countDown()函数,页面将每隔一秒获得最新的时间,从而实现倒计时的效果。