js中的秒杀【倒计时】

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>.box{width: 400px;margin: 20px auto;}</style><body><div class="box">距离明年的中秋还有：&nbsp;<span id="t"></span><span id="d"></span> <!-- 剩余的天数 --><span id="h"></span> <!-- 剩余的小时 --><span id="m"></span> <!-- 剩余的分钟 --><span id="s"></span> <!-- 剩余的秒数 --></div><script>//设置秒杀结束时间var endTime = new Date('2023-09-09 24:00:00'),endSeconds = endTime.getTime();//定义变量保存剩余的时间var t = d = h = m = s = 0;//设置定时器，实现限时秒杀效果var id = setInterval(seckill, 1000); //计时器 开始 setInterval 按照指定的周期（以毫秒计）来调用函数或计算表达式。function seckill() {var nowTime = new Date(); //获取当前时间//获取时间差，单位为秒var remaining = parseInt((endSeconds - nowTime.getTime()) / 1000);//getTime 返回到毫秒if (remaining > 0) { //判断秒杀是否过期t = parseInt(remaining / 31536000);// parseInt  方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数//计算剩余天数（除以60*60*24取整，获取剩余的天数）d = parseInt((remaining / 86400) % 365);//计算剩余小时（除以60*60转换为小时，与24小时取模，获取剩余的小时）h = parseInt((remaining / 3600) % 24);//计算剩余分钟（除以60转为分钟，与60取模，获取剩余的分钟）m = parseInt((remaining / 60) % 60);//计算剩余秒（与60取模，获取剩余的秒数）s = parseInt(remaining % 60);//统一利用两位数表示剩余的天、小时、分钟、秒d = d < 10 ? '0' + d : d;//如果出来的值小于零 那么在前面加一个0h = h < 10 ? '0' + h : h;m = m < 10 ? '0' + m : m;s = s < 10 ? '0' + s : s;} else {clearInterval(id); //秒杀过期，取消定时器d = h = m = s = '00';}//将剩余的天，小时，分钟和秒显示到指定的网页中document.getElementById('t').innerHTML = t + '年';document.getElementById('d').innerHTML = d + '天';document.getElementById('h').innerHTML = h + '时';document.getElementById('m').innerHTML = m + '分';document.getElementById('s').innerHTML = s + '秒';}</script></body>
</html>

js中的秒杀【倒计时】相关推荐

android京东秒杀倒计时,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
php京东秒杀,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
js案例小米秒杀倒计时新年倒计时
** 小米秒杀倒计时设计方案源代码如下 ** 首先设计一个整体的框架即css内容(调好合适边框等) css样式如下 <div class="box"><h3 ...
原生js实现京东秒杀倒计时
京东官网效果 jd有个小bug,倒计时刷新时间会重新回到05:10:59�� H5+CSS部分 <style>* {margin: 0;padding: 0;}.countdown ...
php实现秒杀倒计时,小程序中实现电商秒杀倒计时的效果
在电商应用中,经常会用到秒杀,那么秒杀会有个倒计时功能,这里我们把上次给大家展示的倒计时功能用到电商应用中去. 基本实现功能 1,小程序仿电商网站秒杀倒计时 2,显示格式为:例如 1天11时11分11 ...
html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 仿京东秒杀倒计时 html代码秒杀倒计时 : : c ...
html倒计时的原理,JS实现活动精确倒计时 - 轩枫阁
背景前端页面倒计时功能在很多场景中会用到,如运营活动开始倒计时和活动结束倒计时,又如购物网站的秒杀倒计时,抢购倒计时,还有我们手Q春节抢红包倒计时等等--. 最近的话费代付项目中,也涉及倒计时功能, ...
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下现在有很多网站都在做秒杀商品,而这其中 ...
JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中文本框取出来 ...

js中的秒杀【倒计时】

js中的秒杀【倒计时】相关推荐

最新文章

热门文章