JS 如何实现秒表倒计时效果? 下面本篇文章通过代码示例给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
JavaScript 实现秒表倒计时功能
直接上代码:
- <html>
- <body>
- <span id="clock" style="font-size: 3em">00:30:00:00</span>
- <script type="text/javascript">
- var oclock=document.getElementById("clock");
- var start1 = oclock.innerHTML;
- var finish = "00:00:00:00";
- var timer = null;
- run();
- function run() {// 定义时间函数, 让秒表每 100ms 变化一次
- timer =setInterval("onTimer()", 100);//100ms 的定时器
- }
- function onTimer()
- {
- if (start1 == finish)// 如果倒计时结束清除时间函数
- {
- clearInterval(timer);
- start1="00:00:00:10";//(清除时间函数后还是会执行一次 所以多给一个 10ms 再动态赋值)
- }
- var hms = new String(start1).split(":");// 以: 作为分隔符号取字符串内的数据
- var ms = new Number(hms[3]);// 给每个数据定义对象
- var s = new Number(hms[2]);
- var m = new Number(hms[1]);
- var h = new Number(hms[0]);
- ms -= 10;// 每次执行 ms 减 10
- if (ms <0)// 判断时间并进行变化
- {
- ms = 90;
- s -= 1;
- if (s < 0)
- {
- s = 59;
- m -= 1;
- }
- if (m < 0)
- {
- m = 59;
- h -= 1;
- }
- }
- var ms = ms < 10 ? ("0" + ms) : ms;// 如果出现个位数给个位数前面添加 0
- var ss = s < 10 ? ("0" + s) : s;
- var sm = m < 10 ? ("0" + m) : m;
- var sh = h < 10 ? ("0" + h) : h;
- start1 = sh + ":" + sm + ":" + ss + ":" + ms;
- oclock.innerHTML = start1;// 重新给 oclock 赋值
- }
- </script>
- </body>
- </HTML>
效果图:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17437.html