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 no-repeat写法 背景不重复
Mar 18 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
express.js中间件说明详解
Mar 19 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
smarty中js的调用方法示例
2014/10/27 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
Python的一些用法分享
2012/10/07 Python
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Python 通配符删除文件的实例
2018/04/24 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
狼和鹿教学反思
2014/02/05 职场文书
代理协议书
2014/04/22 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
基层工作经验证明样本
2014/11/16 职场文书
故宫英文导游词
2015/01/31 职场文书
公司车队管理制度
2015/08/04 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python