JavaScript设置倒计时效果
2015-11-06 00:00
746 查看
摘要: 自定义倒计时时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时效果</title> </head> <body> <form name="myForm"> <input type="text" name="h" size="6" />时 <input type="text" name="m" size="6" />分 <input type="text" name="s" size="6" />秒 </form> <button onclick="doStart();">开始</button> <button onclick="doStop();">暂停</button> <button onclick="doGoOn();">继续</button> <h3 id="hid">0:0:0</h3> <script type="text/javascript"> var hid = document.getElementById("hid"); var hh = 0,mm = 0,ss = 0; var id = null; // 开始倒计时 function doStart(){ hh = isNaN(parseInt(document.myForm.h.value)) ? 0 : parseInt(document.myForm.h.value); mm = isNaN(parseInt(document.myForm.m.value)) ? 0 : parseInt(document.myForm.m.value); ss = isNaN(parseInt(document.myForm.s.value)) ? 0 : parseInt(document.myForm.s.value); if(id == null){ // 禁止多次点击产生计时效果出问题 id = setInterval("myTime()",1000); } } // 暂停倒计时 function doStop(){ if(id != null){// 禁止多次点击产生计时效果出问题 clearInterval(id); } } // 继续倒计时,只有在停止倒计时的情况下开始 function doGoOn(){ if(id != null){// 禁止多次点击产生计时效果出问题 id = setInterval("myTime()",1000); } } // 运行倒计时 function myTime(){ checkTime(); ss--; // 秒数减一 if(ss < 0){ ss = 59; mm--; if(mm < 0){ mm = 59; hh--; if(hh < 0){ alert('时间到'); clearInterval(id); return; } } } // 写入hid hid.innerHTML = hh + ':' + mm + ':' + ss; } // 检查每个输入框设置的值,超过60,则自动进1 function checkTime(){ if(ss>59){ var s1 = parseInt(ss/60); ss %= 60; mm += s1; if(mm > 59){ var m1 = parseInt(mm/60); hh += m1; mm %= 60; } } return hh,mm,ss; } </script> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- Ruby on Rails中jquery_ujs组件拖慢速度的问题解决
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法