为了账号安全,请及时绑定邮箱和手机立即绑定

正在学JS的渣渣哪位大神能做出这样的计时器呀 求救^o^

正在学JS的渣渣哪位大神能做出这样的计时器呀 求救^o^

慕粉0931027254 2017-08-28 00:03:14
查看完整描述

1 回答

?
千秋此意

TA贡献158条经验 获得超187个赞

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
    <div id="timer-container">
        <h2>计时器</h2>
        <input type="text" id="timer-view" readonly value="00:00:00:00">
        <button onclick="start()">开始计时</button>
        <button onclick="pause()">结束计时</button>
        <button onclick="reset()">复位</button>
    </div>

    <script>
        var timer = null;
        var msDef = 0;
        var timerData = [];
        var timerView = document.getElementById('timer-view');

        function start() {
            clearInterval(timer);
            timer = setInterval(function() {
                update((msDef += 10, msDef));
            }, 10);
        }

        function pause() {
            clearInterval(timer);
        }

        function reset() {
            clearInterval(timer);
            update((msDef = 0, msDef));
        }

        function update(ms) {
            timerData[0] = Math.floor(ms / 3600000);
            timerData[1] = Math.floor(ms / 60000 % 60);
            timerData[2] = Math.floor(ms / 1000 % 60)
            timerData[3] = Math.floor(ms / 10 % 100);

            timerView.value = formatTime(timerData);
        }

        function formatTime(arr) {
            for (var i = 0; i < arr.length; i++) {
                arr[i] = (arr[i] < 10 ? '0' : '') + arr[i];
            }
            return arr.join(':');
        }
    </script>
</body>
</html>

(只写了js,样式简单楼主自己写下吧~,望采纳~)

查看完整回答
2 反对 回复 2017-08-28
  • 1 回答
  • 0 关注
  • 1106 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信