前言:在电商平台我们经常能看到整点秒杀或者是倒计时秒杀,如何用原生的JS代码来实现这样的功能呢?
1.整点秒杀:
思路分析:(h,m,s)
获取当前的时分秒 new Date()
s++
如果 s > 59,s = 0, m++
m > 59,m = 0, h++
如果hms < 10 ,前面加上0
计算好时分秒赋值给页面的文本
如果 h = 20 && m = 0 && s == 0 则清除定时器(因为我默认设为20:00:00)
代码如下:
Document20:00:00结束
let timeID = setInterval(() => {
//箭头函数绑定this
//(1)获取当前的时分秒 new Date()
let date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
//(2)s++
s++;
//(3)如果 s > 59,s = 0, m++
if (s > 59) {
s = 0;
m++;
};
//(4)如果 m > 59,m = 0, h++
if (m > 59) {
m = 0;
h++;
};
//(5)如果hms < 10 ,前面加上0
//这里不用转换,因为日期对象获取的就是number
console.log(h, m, s);
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
//(6)计算好时分秒赋值给页面的文本
document.getElementById('currentTime').innerText = h + ':' + m + ':' + s;
//(7) 如果 h = 20 && m = 0 && s == 0
if (h == 20 && m == 0 && s == 0) {
clearInterval(timeID);
};
}, 1000);
2.倒计时秒杀:
获取元素
获取当前的时分秒
s--
如果s < 0, s = 59, m--
如果m < 0, m = 59, h--
如果 m h s < 10,需要在前面加上0
将计算好的时分秒赋值给页面元素的文本
如果 h == 0 && m == 0 && s == 0,清除定时器
代码如下
Document01:
03:
06
//1.获取元素和文本
let hour = document.getElementById('hour');
let min = document.getElementById('min');
let sec = document.getElementById('sec');
//2.开启定时器
let timeID = setInterval(()=> {
//(1)获取当前时分秒
let h = hour.innerText;//字符串
let m = min.innerText;
let s = sec.innerText;
//(2)s--
s--; //隐式转换 Number(s)--
//(3)如果s < 0, s = 59, m--
if(s < 0){
s = 59;
m--;
};
// (4) 如果m < 0, m = 59, h--
if(m<0){
m = 59;
h--;
};
//(5)如果 m h s < 10,需要在前面加上0
/*字符串类型在和number计算之前,最好转成number
*/
s = parseInt(s);
m = parseInt(m);
h = parseInt(h);
// 表达式?代码1:代码2
s = s < 10?'0' + s:s;
m = m < 10?'0' + m:m;
h = h < 10?'0' + h:h;
// (6) 将计算好的时分秒赋值给页面元素的文本
hour.innerText = h;
min.innerText = m;
sec.innerText = s;
// (7)如果 h == 0 && m == 0 && s == 0,清除定时器
if(h == 0 && m == 0 && s == 0){
clearInterval(timeID);
};
}, 1000);
总结:倒计时和整点秒杀实现的逻辑略有不同,不过代码是比较相似的,欢迎各位大佬指正.