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 08 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
实例分析javascript中的异步
Jun 02 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
SESSION存放在数据库用法实例
2015/08/08 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
javascript 写类方式之九
2009/07/05 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python异常触发及自定义异常类解析
2019/08/06 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
开学寄语大全
2014/04/08 职场文书
供用电专业求职信
2014/07/07 职场文书
完整版商业计划书
2014/09/15 职场文书
员工加薪申请报告
2015/05/15 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers