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 相关文章推荐
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
简单谈谈python中的多进程
2016/11/06 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python模块相关知识点小结
2020/03/09 Python
用python写PDF转换器的实现
2020/10/29 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
超市5.1促销活动
2014/01/15 职场文书
网络营销计划
2015/01/17 职场文书
立项申请报告范本
2015/05/15 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
HTML基础详解(上)
2021/10/16 HTML / CSS
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript