Js 限时秒杀【倒计时】【案例】
作者:互联网
限时秒杀
限时秒杀(时间倒计时的操作)我们在生活中经常能见到,比如超市抽奖活动,比如某宝商城中某商品限时出售倒计时,再比如电影情节中定时炸弹,是不是来画面感了,铁铁…
那么这种定时炸弹,(⊙o⊙)…不,这种定时器是怎么做的呢?
废话不多说上代码:
样式:
<style>
body {
background-color: gray;
}
ul {
list-style: none;
}
ul li {
border: 1px solid black;
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
margin-right: 10px;
}
ul li:nth-child(1) {
width: 150px;
}
ul li:nth-child(5) {
margin: 0;
}
</style>
结构:
<ul>
<li>开奖时间倒计时</li>
<li id="d"></li>
<li id="h"></li>
<li id="c"></li>
<li id="s"></li>
</ul>
**行为:**
```javascript
<script>
// 初始化时间变量
var d = 0,
h = 0,
c = 0,
s = 0;
// 设置结束时间
var endTime = new Date('2021-11-24 19:49:50').getTime();
//设置定时器 dingshiqi =》 定时器
var dingshiqi = setInterval(action, 1000);
function action() {
// 获取当前时间
var now_time = new Date().getTime();
// 距离结束剩余的时间 结束时间-现在时间
var lase_time = (endTime - now_time) / 1000;
// 判断是否结束倒计时
if (lase_time > 0) {
//计算剩余天数
d = parseInt(lase_time / (60 * 60 * 24));
// 计算剩余小时数
h = parseInt((lase_time / (60 * 60)) % 24);
// 计算剩余分钟数:
c = parseInt((lase_time / 60) % 60);
// 计算当前秒数
s = parseInt(lase_time % 60);
//设置输出的格式:(小于10的情况,前面加0)
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
c = c < 10 ? '0' + c : c;
s = s < 10 ? '0' + s : s;
} else {
clearInterval(dingshiqi);
d = h = c = s = '00';
}
// 把数据传输到html中
document.getElementById('d').innerHTML = d + '天';
document.getElementById('h').innerHTML = h + '时';
document.getElementById('c').innerHTML = c + '分';
document.getElementById('s').innerHTML = s + '秒';
}
</script>
快拿去实现一下吧…
**tips:**定时器的时间是ms(毫秒),别忘了我们需要的是s(秒),记得除1000;
标签:60,限时,10,Js,倒计时,lase,time,var 来源: https://blog.csdn.net/egg_er/article/details/121479526