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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
微信小程序使用npm支持踩坑
Nov 07 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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实现的增强性mhash函数
2015/05/27 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
用python 制作图片转pdf工具
2015/01/30 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
4s店活动策划方案
2014/08/25 职场文书
初中毕业生感言
2015/07/31 职场文书
安全教育的主题班会
2015/08/13 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
JavaScript函数柯里化
2021/11/07 Javascript
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js