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 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
vue首次渲染全过程
Apr 21 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
javascript prototype 原型链
2009/03/12 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
EJB实例的生命周期
2016/10/28 面试题
青春寄语大全
2014/04/09 职场文书
2014年采购工作总结
2014/11/20 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
通讯稿范文
2015/07/22 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
小学英语课教学反思
2016/02/15 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers