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 相关文章推荐
Javascript的闭包
Dec 31 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jquery选择器使用详解
Apr 08 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
vue.js语法及常用指令
Oct 29 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 smarty的预保留变量总结
2008/12/04 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php短址转换实现方法
2015/02/25 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript常见用法总结
2014/05/22 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
git进行版本控制心得详谈
2017/12/10 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python新手学习可变和不可变对象
2020/06/11 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
前台接待员岗位职责
2014/01/02 职场文书
户外婚礼策划方案
2014/02/08 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
银行金融服务方案
2014/06/11 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
使用python绘制横竖条形图
2022/04/21 Python