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的面向对象和继承有利新手学习
Jan 11 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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
杏林同学录(六)
2006/10/09 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
JavaScript 数组详解
2013/10/10 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
javascript 数组精简技巧小结
2020/02/26 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
wxPython 入门教程
2008/10/07 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
大学生自我鉴定范文模板
2014/01/21 职场文书
监督检查工作方案
2014/05/28 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书