html怎么从现在开始计时,倒计时秒杀.html

Document

.box {

width: 200px;

height: 100px;

margin: 100px auto 0;

}

span {

display: inline-block;

width: 30px;

height: 40px;

line-height: 40px;

background-color: #222;

color: #fff;

text-align: center;

font-weight: 700;

}

.button {

text-align: center;

}

button {

margin: 0 auto;

width: 200px;

}

00

:

06

:

10

开始秒杀

// 实现秒杀效果有两种(时间效果)

// 整点秒杀：到了具体的时间点开始实现秒杀，时间不断增长

// 倒计时秒杀：时间从现在开始不断减少

// 需求：倒计时开始，到了 00 : 00 : 00 可以秒杀(按钮可以点)

/*

思路分析

1. 获取相关元素

2. 定时器

2.1 拿到当前的时间信息(字符串)：转换成数字 parseInt()

2.2 秒 减去 1 秒的范围：00 - 59

2.3 判定：秒如果小于0 分 减去 1 ，秒 等于59

2.4 判定：分如果小于0 时 减去 1 ，分 等于59

2.5 前导0补充：时分秒 小于10的时候，前面要补充一个字符串'0'

2.6 将数据写回到页面中：innerText/innerHTML

2.7 判定：三个都为0，开启秒杀，清除定时器

*/

// 1. 获取相关元素

let h = document.getElementById('spanHour');

let m = document.getElementById('spanMin');

let s = document.getElementById('spanSec');

let btn = document.querySelector('button');

// 2. 定时器

let timeId = setInterval(function () {

// 2.1 拿到当前的时间信息(字符串)：转换成数字 parseInt()

let hh = parseInt(h.innerText);

let mm = parseInt(m.innerText);

let ss = parseInt(s.innerText);

// 2.2 秒 减去 1 秒的范围：00 - 59

ss--;

// console.log(ss);

// 2.3 判定：秒如果小于0 分 减去 1 ，秒 等于59

if (ss < 0) {

mm--;

ss = 59;

}

// 2.4 判定：分如果小于0 时 减去 1 ，分 等于59

if (mm < 0) {

hh--;

mm = 59;

}

// 2.5 前导0补充：时分秒 小于10的时候，前面要补充一个字符串'0'

if (hh < 10) { hh = '0' + hh; }

if (mm < 10) { mm = '0' + mm; }

if (ss < 10) { ss = '0' + ss; }

// 2.6 将数据写回到页面中：innerText / innerHTML

h.innerText = hh;

m.innerText = mm;

s.innerText = ss;

// 2.7 判定：三个都为0，开启秒杀，清除定时器

if (hh == 0 && mm == 0 && ss == 0) {

clearInterval(timeId);

btn.disabled = false;

}

}, 1000);

// 细节

// 1. 为了方便计算：拿到数据后要转换成数字

// 2. 数据回写的时候，应该让时分秒保持2位数字

一键复制

编辑

Web IDE

原始数据

按行查看

历史