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类的封装及实现代码
Dec 02 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
jquery 插件学习(六)
Aug 06 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
python发腾讯微博代码分享
2014/01/10 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
统计学教授推荐信
2014/09/18 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
高一军训感想
2015/08/07 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js