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在事件监听方面的兼容性小结
Apr 07 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
Jquery性能优化详解
May 15 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
简单理解vue中Props属性
Oct 27 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 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实现图片转换成ASCII码的方法
2015/04/03 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
js面向对象的写法
2016/02/19 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
jQuery实现评论模块
2020/08/19 jQuery
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python实现在线音乐播放器
2017/03/03 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python如何实现机器人聊天
2020/09/10 Python
python 读取、写入txt文件的示例
2020/09/27 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
自我评价的写作规则
2014/01/06 职场文书
社区活动邀请函范文
2014/01/29 职场文书
公开服务承诺制度
2014/03/26 职场文书
就业协议书样本
2014/08/20 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python