失去了试图制作秒表

时间:2015-03-30 19:38:08

标签: javascript stopwatch

我试图自学JavaScript,而在用秒表做一些文本时,我迷失了这个问题。它正在工作,但总是在95:34:47而不是00:00:00开始

这是我到目前为止所尝试的。

    <script>
        /*Timer Stuff*/
        function pad(num, size) {
            var s = "0000" + num;
            return s.substr(s.length - size);
        } 
        function formatTime(time) {
            var h = m = s = ms = 0;
            var newTime = '';

            h = Math.floor( time / (60 * 60 * 1000) );
            time = time % (60 * 60 * 1000);
            m = Math.floor( time / (60 * 1000) );
            time = time % (60 * 1000);
            s = Math.floor( time / 1000 );
            ms = time % 1000;

            newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
            return newTime;
        } 

        function update() {
            var d = new Date();
            var n = d.getTime();
            document.getElementById("time").innerHTML = formatTime(n);
        }

        function start() {
            MyVar = setInterval(update, 1);
        }
    </script>
</head>
<body>
        <div>Time: <span id="time"></span></div>
        <input type="button" value="start" onclick="start();">
</body>

我知道我需要减去一个特定的时间来准确匹配计时器,但我无法弄清楚如何操作。

2 个答案:

答案 0 :(得分:3)

您需要使用开始时间存储变量,并从中减去。你正在获得的95小时实际上要高得多,只是被裁剪,因为你正在从Unix时代开始计算。

我会这样做:

    function update() {
        var d = new Date();
        var n = d - startTime;
        document.getElementById("time").innerHTML = formatTime(n);
    }

    function start() {
        startTime = new Date();
        MyVar = setInterval(update, 1);
    }

请注意,在减去时甚至不需要使用d.getTime() - 您只需自己减去Date个对象。

答案 1 :(得分:1)

您必须引入一个开始时间变量。 在每个更新步骤中,您必须从开始到现在获得差异。

代码:

    <script>
    /*Timer Stuff*/
    timestart = new Date();
    timestart_time = timestart.getTime();

    function pad(num, size) {
        var s = "0000" + num;
        return s.substr(s.length - size);
    } 
    function formatTime(time) {
        time = time -timestart_time;
        var h = m = s = ms = 0;
        var newTime = '';

        h = Math.floor( time / (60 * 60 * 1000) );
        time = time % (60 * 60 * 1000);
        m = Math.floor( time / (60 * 1000) );
        time = time % (60 * 1000);
        s = Math.floor( time / 1000 );
        ms = time % 1000;

        newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
        return newTime;
    } 

    function update() {
        var d = new Date();
        var n = d.getTime();
        document.getElementById("time").innerHTML = formatTime(n);
    }

        function start() {
            MyVar = setInterval(update, 1);
        }
    </script>
</head>
<body>
        <div>Time: <span id="time"></span></div>
        <input type="button" value="start" onclick="start();">
</body>

这对我有用:)