javascript实现抢购倒计时程序


Posted in Javascript onAugust 26, 2019

本文实例为大家分享了javascript实现抢购倒计时的具体代码,供大家参考,具体内容如下

倒计时分为三种状态:

1) 未到抢购开始时间,显示:抢票倒计时××天××时××分××秒

2) 开始抢购,显示:抢票还剩××天××时××分××秒

3) 抢购完毕,显示:本轮抢购结束 

抢购的起始时间和截止时间,可以通过C#代码输出。

此代码兼容其它浏览器。

<div id="clientclock"> 
 </div> 
 <br /> 
 <br /> 
 <br /> 
 <br /> 
 <mce:script type="text/javascript"><!-- 
 //抢票起始时间 2011年2月29日10点10分0秒,月份的定义从0开始,因此1表示2月份。 
 var start = new Date('2011', '1', '29', '10', '10', '00'); 
 //var start = new Date('2011','1', '28', '15', '10', '00'); 
 
 //抢票截止时间 2011年2月29日11点10分59秒 
 var expire = new Date('2011', '1', '29', '11', '10', '59'); 
 
 //显示倒计时的HTML对象 
 var clock = document.getElementById('clientclock'); 
 
 //倒计时函数,每秒执行一次 
 setLeftTime(); 
 
 function setLeftTime() { 
 
 var now = new Date(); 
 
 //如果当前时间小于抢票起始时间,那么显示:抢票倒计时××天××时××分××秒 
 if (now < start) { 
 var diff = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差 
 var lefttime = (start.getTime() - now.getTime()) + diff * 60000 
 var day = Math.floor(lefttime / (1000 * 60 * 60 * 24)); 
 var hour = Math.floor(lefttime / (1000 * 3600)) - (day * 24); 
 var minute = Math.floor(lefttime / (1000 * 60)) - (day * 24 * 60) - (hour * 60); 
 var second = Math.floor(lefttime / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); 
 
 clock.innerHTML = '抢票倒计时:<span class="ztCopy">' + day + '</span>天 <span class="ztCopy">' + hour + '</span>时 <span class="ztCopy">' + minute + '</span>分 <span class="ztCopy">' + second + '</span>秒'; 
 } 
 //如果当前时间大于等于抢票起始时间,小于抢票截止时间,即:正在抢票,那么显示:抢票还剩××天××时××分××秒 
 else if (now <= expire) { 
 var diff = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差 
 var lefttime = (expire.getTime() - now.getTime()) + diff * 60000 
 var day = Math.floor(lefttime / (1000 * 60 * 60 * 24)); 
 var hour = Math.floor(lefttime / (1000 * 3600)) - (day * 24); 
 var minute = Math.floor(lefttime / (1000 * 60)) - (day * 24 * 60) - (hour * 60); 
 var second = Math.floor(lefttime / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); 
 
 clock.innerHTML = '抢票还剩:<span class="ztCopy">' + day + '</span>天 <span class="ztCopy">' + hour + '</span>时 <span class="ztCopy">' + minute + '</span>分 <span class="ztCopy">' + second + '</span>秒'; 
 } 
 //如果当前时间大于抢票截止时间,即:本轮抢票结束,那么显示:本轮抢购结束 
 else { 
 clock.innerHTML = '本轮抢购结束'; 
 } 
 
 setTimeout("setLeftTime()", 1000); 
 } 

// --></mce:script>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
原生js实现购物车
Sep 23 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
js基础语法与maven项目配置教程案例
Jul 15 Javascript
VUE路由动态加载实例代码讲解
Aug 26 #Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 #Javascript
vue-router路由模式详解(小结)
Aug 26 #Javascript
vue+moment实现倒计时效果
Aug 26 #Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 #Javascript
Moment.js实现多个同时倒计时
Aug 26 #Javascript
vue获取验证码倒计时组件
Aug 26 #Javascript
You might like
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
js获取页面description的方法
2015/05/21 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue登录注册实例详解
2019/09/14 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python读大数据txt
2016/03/28 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python解析yaml文件过程详解
2019/08/30 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
浅谈Python 参数与变量
2020/06/20 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
大学毕业生推荐信
2014/07/09 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
行政处罚事先告知书
2015/07/01 职场文书
MySQL锁机制
2021/04/05 MySQL
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL