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 通过json自动生成Dom的代码
Apr 01 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue cli安装使用less的教程详解
Jul 12 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+mysql实现简单的增删改查功能
2015/07/13 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
使用Python 统计高频字数的方法
2019/01/31 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python-numpy-指数分布实例详解
2019/12/07 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
社团成立邀请函
2014/01/08 职场文书
大学生村官任职感言
2014/01/09 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
班组长岗位职责
2014/03/03 职场文书
银行求职信
2014/05/31 职场文书
材料化学专业求职信
2014/07/15 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
欢送会主持词
2015/07/01 职场文书