<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>限时秒杀</title>
</head>
<style type="text/css">
p{
position: relative;
left: 300px;
margin-left:20px;
}
#day{
width: 50px;
height: 50px;
}
#hour{
width: 50px;
height: 50px;
}
#min{
width: 50px;
height: 50px;
}
#second{
width: 50px;
height: 50px;
}
</style>
<body>
<div class="start">
<img src="../images/s1.jpg">
<P>距离本场秒杀结束还剩：
<input type="text" id="day" value=" ">
<input type="text" id="hour" value=" ">
<input type="text" id="min" value=" ">
<input type="text" id="second" value=" ">
</P>
</div>
<script type="text/javascript">
//设置秒杀结束时间
var endTime=new Date('2019-11-1 18:00:00'),endSeconds=endTime.getTime();//getTime()获取从1970-01-01 00:00:00 距离date对象所代表时间的毫秒数
//定义变量保存剩余的时间
var day=0;
var hour=0;
var min=0;
var second=0;
//设置定时器实现限时秒杀效果
var id=setInterval(miaosha,1000);
function miaosha(){
var nowTime=new Date();//获取当前时间
//获取时间差，单位为秒
var remaining=parseInt((endSeconds-nowTime.getTime())/1000);
if(remaining>0){//判断秒杀是否过期
//计算剩余天数
day=parseInt(remaining/86400);
//计算剩余小时
hour=parseInt(remaining/3600%24);
//计算剩余分钟
min=parseInt(remaining/60%60);
//计算剩余秒数
second=parseInt(remaining%60);
//统一使用两位数表示剩余的时间
day=day<10?'0'+day:day;
hour=hour<10?'0'+hour:hour;
min=min<10?'0'+min:min;
second=second<10?'0'+second:second;
}else{
clearInterval(id);
day=hour=min=second='00';
}
//将剩余时间显示到指定网页中
document.getElementById('day').value=day+'天';
document.getElementById('hour').value=hour+'时';
document.getElementById('min').value=min+'分';
document.getElementById('second').value=second+'秒';
}
</script>
</body>
</html>
执行结果如下：
(这里只是一个静态截图，运行上面的代码执行后可看到动态的倒计时)
