js简单倒计时实现代码


Posted in Javascript onApril 30, 2016

本文实例讲述了js简单倒计时实现代码。分享给大家供大家参考,具体如下:

<div class="time">
 距离活动结束还有<span id="day"></span>天
 <span id="hours"></span>小时
 <span id="min"></span>分
 <span id="sec"></span>秒
</div>
<script type="text/javascript">
var day = document.getElementById("day");
var hours = document.getElementById("hours");
var min = document.getElementById("min");
var sec = document.getElementById("sec");
var DifferenceHour = -1;
var DifferenceMinute = -1;
var DifferenceSecond = -1;
//var Tday = new Date("07 20,2016 10:00:00")  //**倒计时时间点-注意格式
var Tday = new Date("07/20/2016 10:00:00");  //IE:月/日/年
var daysms = 24 * 60 * 60 * 1000;
var hoursms = 60 * 60 * 1000;
var Secondms = 60 * 1000;
var microsecond = 1000;
function clock () {
 var time = new Date();
 var hour = time.getHours();
 var minute = time.getMinutes();
 var second = time.getSeconds();
 var timevalue = "" + ((hour > 12) ? hour-12:hour);
 timevalue += ((minute < 10) ? ":0":":") + minute;
 timevalue += ((second < 10) ? ":0":":") + second;
 timevalue += ((hour > 12) ? " PM":" AM");
 // document.formnow.now.value = timevalue
 var convertHour = DifferenceHour;
 var convertMinute = DifferenceMinute;
 var convertSecond = DifferenceSecond;
 var Diffms = Tday.getTime() - time.getTime();
 DifferenceHour = Math.floor(Diffms / daysms);
 Diffms -= DifferenceHour * daysms;
 DifferenceMinute = Math.floor(Diffms / hoursms);
 Diffms -= DifferenceMinute * hoursms;
 DifferenceSecond = Math.floor(Diffms / Secondms);
 Diffms -= DifferenceSecond * Secondms;
 var dSecs = Math.floor(Diffms / microsecond);
 if (convertHour != DifferenceHour) {
 day.innerHTML = DifferenceHour;
 }
 if (convertMinute != DifferenceMinute) {
 hours.innerHTML = DifferenceMinute;
 }
 if (convertSecond != DifferenceSecond) {
 min.innerHTML = DifferenceSecond;
 }
 sec.innerHTML = dSecs;
 // document.formnow.Tnow.value= DifferenceHour DifferenceMinute + DifferenceSecond + dSecs
 setTimeout("clock()", 1000);
}
clock();
</script>

更多关于JavaScript相关内容可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js字符串操作方法实例分析
May 06 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 #Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 #Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 #Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 #Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 #Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 #Javascript
You might like
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python del()函数用法
2013/03/24 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python 判断网络连通的实现方法
2018/04/22 Python
学生信息管理系统python版
2018/10/17 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python isinstance函数用法详解
2020/02/13 Python
python opencv肤色检测的实现示例
2020/12/21 Python
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
会计自我鉴定范文
2013/10/06 职场文书
生产管理的三大手法
2013/11/11 职场文书
物流合作计划书
2014/01/10 职场文书
售后客服个人自我评价
2014/09/14 职场文书
联村联户简报
2015/07/21 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
z-index不起作用
2021/03/31 HTML / CSS
PHP控制循环操作的时间
2021/04/01 PHP
vue如何清除浏览器历史栈
2022/05/25 Vue.js