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 相关文章推荐
七个很有意思的PHP函数
May 12 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
基于复选框demo(分享)
Sep 27 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
浅谈克隆 JavaScript
Nov 02 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设置session值和cookies的学习示例
2014/03/21 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
对Python3中的input函数详解
2018/04/22 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python实现TCP文件传输
2020/03/20 Python
python 动态绘制爱心的示例
2020/09/27 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
初中升旗仪式演讲稿
2014/05/08 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
品德与社会教学反思
2016/02/24 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers