【JS】秒杀倒计时制作

效果

JS代码

seckill.js

;
/** seckill() 秒杀倒计时栏目*  参数：*      days    天数节点*      hours   小时节点*      minutes 分钟节点*      seconds   秒节点*      time_days   天数 秒杀时间*      time_hours  小时*      time_mintes 分钟*      time_sec    秒数*/
function seckill(days, hours, minutes, seconds, { time_days = 0, time_hours = 0, time_mintues = 0, time_sec = 0 } = {}) {//初始化days.innerHTML = valueTest(time_days) + "天";hours.innerHTML = valueTest(time_hours) + "时";minutes.innerHTML = valueTest(time_mintues) + "分";seconds.innerHTML = valueTest(time_sec) + "秒";let kill = setInterval(() => {//如果秒杀时间结束则清除间隔定时器if (time_days === 0 && time_hours === 0 && time_mintues === 0 && time_sec === 0) {clearInterval(kill);} else {--time_sec;if (time_sec < 0) {time_sec = 59;--time_mintues;}if (time_mintues < 0) {time_mintues = 59;--time_hours;}if (time_hours < 0) {time_hours = 23;--time_days;}days.innerHTML = valueTest(time_days) + "天";hours.innerHTML = valueTest(time_hours) + "时";minutes.innerHTML = valueTest(time_mintues) + "分";seconds.innerHTML = valueTest(time_sec) + "秒";}}, 1000);function valueTest(value) {if (value < 10) {return '0' + value;}return value;}
}

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>秒杀</title><style>.seckill {width: 996px;height: 352px;margin: 0 auto;}.brand {width: 100%;height: 100%;}.brand img {width: 100%;height: 100%;}.content {text-align: center;color: red;font-size: 18px;margin-top: 10px;}.content span {display: inline-block;width: 40px;margin: 0 5px;border: 1px solid #aaa;}</style>
</head><body><div class="seckill"><div class="brand"><img src="data:images/seckill.png" alt=""></div><div class="content">距离本场秒杀还剩：<span id="days"></span><span id="hours"></span><span id="minutes"></span><span id="seconds"></span></div></div><script src="js/seckill.js"></script><script>window.onload = function () {//获取元素let days = document.getElementById("days");let hours = document.getElementById("hours");let minutes = document.getElementById("minutes");let seconds = document.getElementById("seconds");//设置秒杀倒计时为2天let time_day = 2;seckill(days, hours, minutes, seconds, { time_days: time_day });}</script>
</body></html>

【JS】秒杀倒计时制作相关推荐

html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 仿京东秒杀倒计时 html代码秒杀倒计时 : : c ...
android京东秒杀倒计时,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
php京东秒杀,js实现京东秒杀倒计时功能
本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给 ...
js案例小米秒杀倒计时新年倒计时
** 小米秒杀倒计时设计方案源代码如下 ** 首先设计一个整体的框架即css内容(调好合适边框等) css样式如下 <div class="box"><h3 ...
Ext JS 4倒计时：开发者预览版
作为Ext JS团队的代表,我很高兴地宣布第一个Ext JS 4开发者预览版发布了.Ext JS 4是到目前为止,我们所做的改动最大,有史以来最先进的Javascript框架.从生成HTML代码到类 ...
php time豪秒_PHP精确到毫秒秒杀倒计时实例详解
精确到毫秒秒杀倒计时PHP源码实例,前台js活动展示倒计时,后台计算倒计时时间.每0.1秒定时刷新活动倒计时时间. PHP: // 注意:php的时间是以秒算.js的时间以毫秒算 // 设置时区 da ...
js 活动倒计时详解
背景前端页面倒计时功能在很多场景中会用到,如运营活动开始倒计时和活动结束倒计时,又如购物网站的秒杀倒计时,抢购倒计时,还有我们手Q春节抢红包倒计时等等--. 最近的话费代付项目中,也涉及倒计时功能, ...
分享75个JS特效倒计时，总有一款适合您
分享75个JS特效倒计时,总有一款适合您 75个JS特效倒计时下载链接:https://pan.baidu.com/s/1SntVvt85nhN3JgqcsTFY6Q?pwd=q27q 提取码:q2 ...
js/jq 倒计时插件（一）
//很多时候我们需要用到倒计时比如(一些发布会倒计时,秒杀倒计时,活动倒计时等),接下来将介绍两种倒计时插件的写法 //html结构 <!DOCTYPE html> <html la ...
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下现在有很多网站都在做秒杀商品,而这其中 ...

【JS】秒杀倒计时制作

效果

JS代码

html

【JS】秒杀倒计时制作相关推荐

最新文章

热门文章