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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
js模块加载方式浅析
Aug 12 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
django使用html模板减少代码代码解析
2017/12/12 Python
Python编程argparse入门浅析
2018/02/07 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
python中append实例用法总结
2019/07/30 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python中return如何写
2020/06/18 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
医药营销个人求职信
2014/04/12 职场文书
厕所文明标语
2014/06/11 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
浅谈react useEffect闭包的坑
2021/06/08 Javascript
HTML基础详解(上)
2021/10/16 HTML / CSS