我们在网上购物时,经常看的到活动秒杀的情况,我们自身实现一个来试试
function miaosha() {
//获取倒计时的li标签
var timerLis = document.querySelectorAll('.Interval>ul>li');
//倒计时 实参接收
function date(y, m, d, h, mm) {
//设置未来时间
var future = new Date(y, m, d, h, mm);
//设置剩余的时间
var shengyu = (future - new Date()) / 1000;
//天
var day = parseInt(shengyu / 60 / 60 / 24);
//时
var hours = parseInt(shengyu / 60 / 60 % 24);
//分
var minutes = parseInt(shengyu / 60 % 60);
//秒
var second = parseInt(shengyu % 60);
//判断如果剩余的时间小于0,也就是倒计时已结束,返回出去。
if (shengyu <= 0) {
return shengyu;
}
//补零
function addZero(num) {
return num < 10 ? '0' + num : num;
}
//将倒计时天,时,分,秒传入页面li中
timerLis[0].innerHTML = addZero(day);
timerLis[1].innerHTML = addZero(hours);
timerLis[2].innerHTML = addZero(minutes);
timerLis[3].innerHTML = addZero(second);
// console.log(day, hours, minutes, second);
}
//形参 年,月(一定要注意,月份从0开始,所以设置月份要-1),日,时,分
date(2019, 5, 8, 21, 00);
//定时器
var timer = null;
timer = setInterval(function () {
//形参 年,月(一定要注意,月份从0开始,所以设置月份要-1),日,时,分
var time = date(2019, 5, 8, 21, 00);
// 如果返回的小于0,则清除定时器
if (time <= 0) {
clearInterval(timer);
timer = null;
}
}, 1000)
}
miaosha();
网页为
<div class="Interval">
<h1>活动秒杀</h1>
<span>FLASH DEALS</span>
<p>⚡</p>
<h3>本场距离结束还剩</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
感兴趣的小伙伴可以试试,然后看看代码研究一下,有问题下方评论









网友评论