大家在浏览一些购物软件的时候,是不是经常会出现一些限时秒杀的活动呢?其实这里的倒计时 我们是可以用js代码去实现这个效果的,接下来我为大家介绍一下 如何敲出倒计时。
倒计时的逻辑就是 用 将来的时间 - 现在的时间
下面我们来分析一下写倒计时需要什么????
1、首先我们需要用function函数
2、其次我们是不是最少需要4个数据:天、时、分、秒
3、最后需要一个计时器setInterval
接下来我们看代码及注释理解
<h2></h2> //创建h2标签,用来写入时间 在body后面写 在script前写
// 获取h2标签
var h = document.getElementsByTagName('h2')[0];
function countDown(y, m, d) {
var now_time = new Date();//获取现在时间
var stop_time = new Date(y, m - 1, d); //截止时间
var value = stop_time - now_time; //剩余时间 = 截止时间 - 现在时间
console.log(value)//剩余时间毫秒数
var days = Math.floor(value / 1000 / 60 / 60 / 24);//剩余时间换算成天
var hours = Math.floor(value / 1000 / 60 / 60 % 24);//剩余时间换算成时
var mintues = Math.floor(value / 1000 / 60 % 60); //剩余时间换算成分
var seconds = Math.floor(value / 1000 % 60);//剩余时间换算成秒
return `${days<10?"0" + days:days}天${hours<10 ? "0"+days:hours}时${mintues<10 ? "0"+mintues:mintues}分${seconds < 10?"0"+seconds:seconds}秒`
}//判断,如果显示在页面的天时分秒小于10的时候,在它们前面加0,显示两位数
countDown(2019, 11, 1);//传入实参,就是我们想要的未来时间
setInterval(function () {
h.innerHTML = countDown(2019,11,1); // 把剩余时间写入页面 隔一秒写一次
}, 1000)
这样我们就敲出了一个倒计时,是不是很有趣呢,大家快来试试吧