小白通过听掘金课程中老师的讲授，并学习了《JavaScript前端开发案例教程》。用Javascript+html实现了限时秒杀页面功能。
首先用html设计页面及布局。
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="box" >
<div id="biaoti"><p>距离本次秒杀结束还剩：</p></div>
<div id="day" ></div> //剩余天数
<div id="hour"></div> //小时
<div id="minute"></div> //分钟
<div id="second"></div> //秒
</div>
</body>
这里的文字和功能块全部采用div。因为要实现的是一个比较简单的功能，所以方便进行样式的调节和设置。为了实现居中对齐。所以将父级div的宽度设置成了100%
<style>
#box{
width: 100%;
height: 20px;
text-align: center;
}
#biaoti{
width: 200px;
overflow: auto;
display: inline-block;
background-color: rgb(229, 146, 11);
}
#day{
width: 50px;
overflow: auto;
display: inline-block;
border: 1px solid;
margin-bottom: 12px;
}
#hour{
width: 50px;
overflow: auto;
display: inline-block;
border: 1px solid;
margin-bottom: 12px;
}
#minute{
width: 50px;
overflow: auto;
display: inline-block;
border: 1px solid;
margin-bottom: 12px;
}
#second{
width: 50px;
overflow: auto;
display: inline-block;
border: 1px solid;
margin-bottom: 12px;
}
</style>
</html>
这里就是一些样式的设置。进行宽度和display属性的设置是为了让div组块出现在一行。
JavaScript功能实现：
<script>
var endTime = new Date('2023-8-20 22:00:00'),endSeconds = endTime.getTime();//设置结束时间
var day =hour=minute=second = 0;//定义变量保存剩余的时间
var id = setInterval(seckill,1000);//设置定时器
function seckill(){
var nowTime = new Date();//获取当前的时间
var remaining = parseInt((endSeconds - nowTime.getTime())/1000);
if(remaining>0){
day= parseInt(remaining/(60*60*24));//通过秒数进行计算的
hour = parseInt(remaining / (60*60)%24);
minute = parseInt(remaining / 60%60);
second = parseInt(remaining %60);
day = day<10 ?'0'+day :day;//用两位数表示剩余的天数。
hour = hour<10 ?'0'+hour :hour;//用两位数表示剩余的时数。
minute = minute<10 ?'0'+minute :minute;//用两位数表示剩余的分数。
second = second<10 ?'0'+second :second; //用两位数表示剩余的秒数。
}
else{
clearInterval(id);
day=hour=minute=second='00';//秒杀过期，取消定时器
}
//将剩余的时间通过特定id显示到网页中。
document.getElementById('day').innerHTML = day + '天';
document.getElementById('hour').innerHTML = hour + '时';
document.getElementById('minute').innerHTML = minute + '分';
document.getElementById('second').innerHTML = second + '秒';
}
</script>
1. 秒杀时间endTime是自己设置的。之后设置定时器。
2. 通过Date对象提供的getTime（）方法分别获取结束时间和当前时间的毫秒数
3. 将结束时间和当前时间相减获得剩余的秒数。
4. 通过if函数进行判断秒杀时间是否过期，若没有过期，则计算剩余的天数、小时、分钟和秒数；若已过期则停止秒杀的倒计时。
代码中选用setInterval（）设置定时器，而不用setTimeout（）。是因为，setInterval可以重复执行代码。而setTimeout只执行一次代码
最终实现效果如下图gif所示：
