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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JavaScript基础心法 数据类型
Mar 05 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
扩展你的 PHP 之入门篇
2006/12/04 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Python操作MongoDB数据库的方法示例
2018/01/04 Python
基于python log取对数详解
2018/06/08 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python程序文件扩展名知识点详解
2020/02/27 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
介绍一下JNDI的基本概念
2013/07/26 面试题
校园自助餐厅的创业计划书
2013/12/26 职场文书
减负增效提质方案
2014/05/23 职场文书
2014年减负工作总结
2014/12/10 职场文书
岳麓书院导游词
2015/02/03 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python