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 读取xml,写入xml 实现代码
Jul 10 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JSONP基础知识详解
Mar 19 Javascript
小程序实现单选多选功能
Nov 04 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
JavaScript 数组去重详解
Sep 15 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
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
常用js脚本
2006/12/03 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
Python最长公共子串算法实例
2015/03/07 Python
Python 解析简单的XML数据
2020/07/24 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
编辑找工作求职信分享
2014/01/03 职场文书
股权转让协议书范本
2014/04/12 职场文书
社会实践活动总结范文
2014/07/03 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
2016年元旦主持词
2015/07/06 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
Redis唯一ID生成器的实现
2022/07/07 Redis
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS