效果
JS代码
seckill.js
;
/*
* seckill() 秒杀倒计时栏目
* 参数:
* days 天数节点
* hours 小时节点
* minutes 分钟节点
* seconds 秒节点
* time_days 天数 秒杀时间
* time_hours 小时
* time_mintes 分钟
* time_sec 秒数
*/
function seckill(days, hours, minutes, seconds, { time_days = 0, time_hours = 0, time_mintues = 0, time_sec = 0 } = {}) {
//初始化
days.innerHTML = valueTest(time_days) + "天";
hours.innerHTML = valueTest(time_hours) + "时";
minutes.innerHTML = valueTest(time_mintues) + "分";
seconds.innerHTML = valueTest(time_sec) + "秒";
let kill = setInterval(() => {
//如果秒杀时间结束则清除间隔定时器
if (time_days === 0 && time_hours === 0 && time_mintues === 0 && time_sec === 0) {
clearInterval(kill);
} else {
--time_sec;
if (time_sec < 0) {
time_sec = 59;
--time_mintues;
}
if (time_mintues < 0) {
time_mintues = 59;
--time_hours;
}
if (time_hours < 0) {
time_hours = 23;
--time_days;
}
days.innerHTML = valueTest(time_days) + "天";
hours.innerHTML = valueTest(time_hours) + "时";
minutes.innerHTML = valueTest(time_mintues) + "分";
seconds.innerHTML = valueTest(time_sec) + "秒";
}
}, 1000);
function valueTest(value) {
if (value < 10) {
return '0' + value;
}
return value;
}
}
html
<!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>秒杀</title>
<style>
.seckill {
width: 996px;
height: 352px;
margin: 0 auto;
}
.brand {
width: 100%;
height: 100%;
}
.brand img {
width: 100%;
height: 100%;
}
.content {
text-align: center;
color: red;
font-size: 18px;
margin-top: 10px;
}
.content span {
display: inline-block;
width: 40px;
margin: 0 5px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div class="seckill">
<div class="brand">
<img src="images/seckill.png" alt="">
</div>
<div class="content">
距离本场秒杀还剩:
<span id="days"></span><span id="hours"></span><span id="minutes"></span><span id="seconds"></span>
</div>
</div>
<script src="js/seckill.js"></script>
<script>
window.onload = function () {
//获取元素
let days = document.getElementById("days");
let hours = document.getElementById("hours");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
//设置秒杀倒计时为2天
let time_day = 2;
seckill(days, hours, minutes, seconds, { time_days: time_day });
}
</script>
</body>
</html>