setTimeout定时器以及部分小知识点

setTimeout定时器

难点:

  1. 按固定格式输出(hh:mm:ss)
  2. 开始,暂停,开始
  3. 解决多次点击开始会使定时器速度加快的问题

1. 按固定格式输出

function formatNumber(num) {
    return num < 10 ? '0' + num : num;
}

思路:在每次输出之前格式化一下数据,使用三元运算符,如果小于10就在前面补0。

2. 开始,暂停,开始

var flag = 1;
function Timer() {
    flag = 1;
    if (flag == 1) {
        if (sec <= 59 && sec >= 0 && min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
            document.getElementById('showTime').innerHTML = formatN(hou) + ":" + formatN(min) + ":" + formatN(sec);
            sec = sec + 1;
        } else if (min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
            min = min + 1;
            sec = 0;
        } else if (hou <= 59 && hou >= 0) {
            hou = hou + 1;
            min = 0;
            sec = 0;
        }
        window.timer = setTimeout("Timer()", 1000);
    }
}

function stop() {
    clearTimeout(timer);
    flag = 0;
}

思路:加一个标记flag,开始执行之后改变flag为原来的值并启动定时器,暂停的时候改变flag的值。

3. 解决多次点击开始会使定时器速度加快的问题

出现这个问题的原因:

假如你在0时刻点击了一下按钮,那么500ms时数字会跳一下,1000ms会再跳一下,依次类推,1500,2000,2500…..的时候都会跳一下,时间间隔始终是500ms,但是,假如你在300ms的时候又点击了一下按钮,那么800ms的时候数字就会跳一下,1300,1800,2300…..的时侯都会跳一下,那么现在看0到2000ms之间,300,500,800,1000,1300,1500,1800,2000时刻时数字都会跳一下,数字变化的时间间隔自然会变小,同理,你点击的次数越多,时间间隔就会越小。

解决方案:

每次启动定时器的时候先清一下定时器(clearTimeout()),此时会有另一个问题,先清定时器会报错:定时器未定义,解决方法是:

if(window.t) clearTimeout(window.t);
window.t =  setTimeout(..... );

window上即使未定义也不会报错。

完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        #showTime {
            color: red;
            font-size: 30px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <h1>setTimeout实现计时器</h1>
    <script>
        var sec = 0;
        var min = 0;
        var hou = 0;
        var flag = 1;

        function Timer() {
            flag = 1;
            if (flag == 1) {
                if (sec <= 59 && sec >= 0 && min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
                    document.getElementById('showTime').innerHTML = formatNumber(hou) + ":" + formatNumber(min) + ":" + formatNumber(sec);;
                    sec = sec + 1;
                } else if (min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
                    min = min + 1;
                    sec = 0;
                } else if (hou <= 59 && hou >= 0) {
                    hou = hou + 1;
                    min = 0;
                    sec = 0;
                }
                if (window.timer) {
                    clearTimeout(timer);
                }
                window.timer = setTimeout("Timer()", 1000);
            }
        }

        function formatNumber(num) {
            return num < 10 ? '0' + num : num;
        }

        function stop() {
            clearTimeout(timer);
            flag = 0;
        }
    </script>
    <button onclick="Timer()">开始计时</button>
    <button onclick="stop()">暂停计时</button>
    <p id="showTime">00:00:00</p>

</body>

</html>

运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏飞雪无情的博客

Android设计应用图标不用愁---Asset Studio Integration来帮你

Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具,它是由RomanNurik开发的。现在我们已经在ADT14里支持同...

12050
来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

25950
来自专栏Ray学习笔记

Jump Start Bootstrap 第2章

在这一章,我们将讨论Bootstrap一个最重要的功能:网格系统。我们将学会网格系统如何工作;我们如何在应用中使用网格系统;我们也将创建简单的网页布局去更好的理...

13440
来自专栏DannyHoo的专栏

iOS开发中使用系统中没有的字体-swift

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

12030
来自专栏web前端

02移动端布局

  一、rem      1、意义:当px固定宽度不能适应不同屏幕尺寸时,布局需要,从而产生rem      2、rem 和 em 区别           2...

21890
来自专栏james大数据架构

FrameLayout(框架布局)

框架布局是最简单的布局形式。所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件...

212100
来自专栏HTML5学堂

特殊字体神器-fontmin,秒杀一切工具

HTML5学堂:此前,我们介绍过font-spider这款软件,也讲解过处理网络字体的方法。而今我们为大家介绍一款能够秒杀之前所有工具的“特殊字体”制作工具。 ...

49240
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Alphabet Flashcards

课程内容 Ø 幻灯片效果的切换     最近有人问我如何来写一个幻灯片的应用程序,在这个应用程序中,他们可以在不同的页面之间切换,就像在Pictures h...

21760
来自专栏逸鹏说道

06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我...

27250
来自专栏IT可乐

frameset标签设计页面

重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使...

26690

扫码关注云+社区

领取腾讯云代金券