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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
JS获取动态添加元素的方法详解
Jul 31 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读取csv文件内容的详解
2013/06/18 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
董事长秘书职责
2014/01/31 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
带病坚持工作事迹
2014/05/03 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
教师岗位说明书
2015/09/30 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript