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 的 prototype问题。
Jan 03 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
js运动应用实例解析
Dec 28 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
JS前端监控采集用户行为的N种姿势
Jul 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
探讨如何把session存入数据库
2013/06/07 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
清除输入框内的空格
2016/12/21 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
js编写选项卡效果
2017/05/23 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
重命名批处理python脚本
2013/04/05 Python
Python选课系统开发程序
2016/09/02 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python能开发游戏吗
2020/06/11 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
消防安全员岗位职责
2014/03/10 职场文书
植树节活动总结
2014/04/30 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
七年级数学教学反思
2016/02/17 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python