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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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调用三种数据库的方法(1)
2006/10/09 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
javascript如何实现create方法
2019/11/04 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
python实现SOM算法
2018/02/23 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python3.5的包存放的具体路径
2020/08/16 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
煤矿安全演讲稿
2014/05/09 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
生日祝酒词大全
2015/08/10 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书