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实现拖拽 闭包函数详细介绍
Nov 25 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
详解vue项目构建与实战
Jun 27 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
react MPA 多页配置详解
Oct 18 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
Python下Fabric的简单部署方法
2015/07/14 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
产品促销活动策划书
2014/01/15 职场文书
《春天来了》教学反思
2014/04/07 职场文书
理想演讲稿范文
2014/05/21 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js