java web整点秒杀,原生JS实现倒计时和整点秒杀(详解)

前言:在电商平台我们经常能看到整点秒杀或者是倒计时秒杀,如何用原生的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)

代码如下:

Document

20: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,清除定时器

代码如下

Document

01:

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);

总结:倒计时和整点秒杀实现的逻辑略有不同,不过代码是比较相似的,欢迎各位大佬指正.