前言:在电商平台我们经常能看到整点秒杀或者是倒计时秒杀,如何用原生的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)
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span id="currentTime"></span>
<br>
<span> 20:00:00结束</span>
<script>
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);
</script>
</body>
</html>
2.倒计时秒杀:
- 获取元素
- 获取当前的时分秒
- s--
- 如果s < 0, s = 59, m--
- 如果m < 0, m = 59, h--
- 如果 m h s < 10,需要在前面加上0
- 将计算好的时分秒赋值给页面元素的文本
- 如果 h == 0 && m == 0 && s == 0,清除定时器
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span id="hour">01</span>:
<span id="min">03</span>:
<span id="sec">06</span>
<script>
//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);
</script>
</body>
</html>
总结:倒计时和整点秒杀实现的逻辑略有不同,不过代码是比较相似的,欢迎各位大佬指正.
