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陷阱清单
May 31 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
Vue父子之间值传递的实例教程
Jul 02 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
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
python获取中文字符串长度的方法
2018/11/14 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python中eval与int的区别浅析
2019/08/11 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
西部世纪面试题
2014/12/05 面试题
研修第一天随笔感言
2014/02/15 职场文书
施工员岗位职责
2014/03/16 职场文书
超市商业计划书
2014/05/04 职场文书
优秀应届生求职信
2014/06/16 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
超强台风观后感
2015/06/09 职场文书
2016国培研修心得体会
2016/01/08 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python