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 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP静态成员变量
2017/02/14 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
打包发布Python模块的方法详解
2016/09/18 Python
名片管理系统python版
2018/01/11 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
文员个人求职自荐信
2013/09/21 职场文书
就业协议书怎么填
2014/04/11 职场文书
出国留学计划书
2014/04/27 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技