简单计时器

作者: Chansl | 来源:发表于2017-03-10 18:24 被阅读0次

简单计时器
GCD倒计时器速成
Android倒计时 Android仿京东倒计时 Androi
TCP的4个计时器
Android基础到进阶UI Chronometer 使用+实例
iOS - 计时器及冲突问题（NSTimer，dispatch_
iOS 计时器（GCD计时器和Time计时器）
JS简单计时器效果
Unity 简单计时器Timer
仿照react文档中的react编程思想实现计时器


<html>

<head>
    <meta charset="utf-8">
    <title>计时器</title>
    <style>
        #oT {
            width: 400px;
            height: 200px;
            background-color: #000;
            margin: 0 auto;
            color: #fff;
            font-size: 90px;
            text-align: center;
            line-height: 200px;
            font-weight: 400;
        }
        
        #start {
            width: 50px;
            height: 30px;
            font-size: 18px;
            margin: 10px auto;
            display: block;
        }
    </style>
</head>

<body>
    <div id="oT">00:00:00</div>
    <button id="start" onclick="timesGo()">start</button>
    <script>
        var interval, reg = /^\d$/,
            sleep = 1000,
            sum = 0;
        var timesGo = function() {
            if (!interval) {
                interval = setInterval(function() {
                    sum++;
                    var d = new Date("1111/1/1,0:0:0");
                    d.setSeconds(sum);
                    var h = d.getHours();
                    h = reg.test(h) ? "0" + h + ":" : h + ":"
                    var m = d.getMinutes();
                    m = reg.test(m) ? "0" + m + ":" : m + ":"
                    var s = d.getSeconds();
                    s = reg.test(s) ? "0" + s : s;
                    document.querySelector('#oT').innerHTML = h + m + s;
                }, sleep);

            } else {
                clearInterval(interval);
                interval = null;
            }
        }
    </script>

</body>

</html>