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 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
React配置子路由的实现
Jun 03 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
一个简单的php路由类
2016/05/29 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
Python实现自动发送邮件功能
2021/03/02 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Django框架模板介绍
2019/01/15 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
光电信息专业应届生求职信
2013/10/07 职场文书
旅游管理本科生求职信
2013/10/14 职场文书
财务部绩效考核方案
2014/05/04 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL