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中的Array对象使用说明
Jan 17 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
js给selected添加options的方法
May 06 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
详解Vue底部导航栏组件
May 02 Javascript
vue实现百度搜索功能
Dec 28 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
Openlayers实现距离面积测量
Sep 28 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完整的日历类(CLASS)
2006/11/27 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
jQuery实现统计复选框选中数量
2014/11/24 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
关于python中的xpath解析定位
2020/03/06 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python通过cython加密代码
2020/12/11 Python
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
法定代表人授权委托书
2014/09/19 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
教师辞职书范文
2015/02/26 职场文书
研究生简历自我评
2015/03/11 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
爱国之歌(8首)
2019/09/29 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python