Javascript 倒计时源代码.(时.分.秒) 详细注释版


Posted in Javascript onMay 09, 2011

随便写写!闲着无聊!代码如有bug之处欢迎阁下强力拍砖!
JS CODE

<script type="text/javascript" language="javascript"> 
//总时间,已分为单位 
var time = 100; 
//小时 
var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0; 
//分 
var m = time % 60; 
//秒 
var s = 60; 
//输出到当前Script的Dom位置 
document.write('<span>剩余<font id="f_hh">' + h + '</font>小时<font id="f_mm">' + m + '</font>分<font id="f_ss">' + s + '</font>秒</span>'); 
//开始执行倒计时 
var timeInterval = setInterval(function () { 
//如果时、分、秒都为0时将停止当前的倒计时 
if (h == 0 && m == 0 && s == 0) { clearInterval(timeInterval); return; } 
//当秒走到0时,再次为60秒 
if (s == 0) { s = 60; } 
if (s == 60) { 
//每次当秒走到60秒时,分钟减一 
m -= 1; 
//当分等于0时并且小时还多余1个小时的时候进里面看看 
if (m == 0 && h > 0) { 
//小时减一 
h -= 1; 
//分钟自动默认为60分 
m = 60; 
//秒自动默认为60秒 
s = 60; 
} 
} 
//秒继续跳动,减一 
s -= 1; 
//小时赋值 
document.getElementById('f_hh').innerHTML = h; 
//分钟赋值 
document.getElementById('f_mm').innerHTML = m; 
//秒赋值 
document.getElementById('f_ss').innerHTML = s; 
}, 1000); 
</script>

HTML CODE
<html> 
<head> 
<title>Date Demo</title> 
</head> 
<body> 
<script type="text/javascript" language="javascript"> 
//总时间,已分为单位 
var time = 100; 
//小时 
var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0; 
//分 
var m = time % 60; 
//秒 
var s = 60; 
//输出到当前Script的Dom位置 
document.write('<span>剩余<font id="f_hh">' + h + '</font>小时<font id="f_mm">' + m + '</font>分<font id="f_ss">' + s + '</font>秒</span>'); 
//开始执行倒计时 
var timeInterval = setInterval(function () { 
//如果时、分、秒都为0时将停止当前的倒计时 
if (h == 0 && m == 0 && s == 0) { clearInterval(timeInterval); return; } 
//当秒走到0时,再次为60秒 
if (s == 0) { s = 60; } 
if (s == 60) { 
//每次当秒走到60秒时,分钟减一 
m -= 1; 
//当分等于0时并且小时还多余1个小时的时候进里面看看 
if (m == 0 && h > 0) { 
//小时减一 
h -= 1; 
//分钟自动默认为60分 
m = 60; 
//秒自动默认为60秒 
s = 60; 
} 
} 
//秒继续跳动,减一 
s -= 1; 
//小时赋值 
document.getElementById('f_hh').innerHTML = h; 
//分钟赋值 
document.getElementById('f_mm').innerHTML = m; 
//秒赋值 
document.getElementById('f_ss').innerHTML = s; 
}, 1000); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JS异步错误捕获的一些事小结
Apr 26 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 #Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 #Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 #Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 #Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 #Javascript
基于jQuery的倒计时插件代码
May 07 #Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 #Javascript
You might like
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python实现微信小程序支付功能
2019/07/25 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
妈妈的账单教学反思
2014/02/06 职场文书
公司员工检讨书
2014/02/08 职场文书
项目负责人任命书
2014/06/04 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
董事长秘书工作总结
2015/08/14 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python