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 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
jQuery插件开发汇总
May 15 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
TS 类型兼容教程示例详解
Sep 23 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
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
php使用正则验证中文
2016/04/06 PHP
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python字符类型的一些方法小结
2016/05/16 Python
python实现发送邮件功能
2017/07/22 Python
Python 多线程的实例详解
2017/09/07 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
利用python生成照片墙的示例代码
2020/04/09 Python
如何解决安装python3.6.1失败
2020/07/01 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
工商管理应届生求职信
2013/10/07 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
毕业生工作求职信
2014/06/30 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
React配置子路由的实现
2021/06/03 Javascript