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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
jquery datatable服务端分页
Aug 31 Javascript
js时间查询插件使用详解
Apr 07 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
js实现二级联动简单实例
Jan 11 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
宿舍保安职务说明书
2014/02/25 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
中秋节晚会开场白
2015/05/29 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Python基础详解之描述符
2021/04/28 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis