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 相关文章推荐
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
vue v-on监听事件详解
May 17 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python中对数据进行各种排序的方法
2019/07/02 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Django更新models数据库结构步骤
2020/04/01 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
运动会广播稿50字
2014/01/26 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Python list列表删除元素的4种方法
2021/11/01 Python
Python学习之os包使用教程详解
2022/03/21 Python