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读取ASP设定的COOKIE
Feb 15 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
jQuery操作之效果详解
May 19 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
js不常见操作运算符总结
Nov 20 Javascript
5个实用的JavaScript新特性
Jun 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
用Php实现链结人气统计
2006/10/09 PHP
php csv操作类代码
2009/12/14 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php多线程并发实现方法
2016/09/30 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
Js中sort()方法的用法
2006/11/04 Javascript
JavaScript的面向对象(二)
2006/11/09 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python正则-re的用法详解
2019/07/28 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python如何调用字典的key
2020/05/25 Python
python中使用np.delete()的实例方法
2021/02/01 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
用Python可视化新冠疫情数据
2022/01/18 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS