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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
js调试工具Console命令详解
Oct 21 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 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 根据IP地址控制访问的代码
2010/04/22 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
js常用排序实现代码
2010/12/28 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
django使用channels实现通信的示例
2020/10/19 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
CSS3实现时间轴特效
2020/11/02 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
大学自我鉴定
2013/12/20 职场文书
英语感恩演讲稿
2014/01/14 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
2014年国庆节寄语
2014/09/19 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫