跑表;如何在秒表上经过 x 秒后播放声音答案

【问题标题】：Stopwatch; how to play a sound after x second has passed on the stopwatch跑表;如何在秒表上经过 x 秒后播放声音
【发布时间】：2018-09-04 16:38:47
【问题描述】：

如何在简单的秒表上播放 x 秒后的声音。我尝试了几种不同类型的秒表，但在 x 秒过去后我什至无法让它做某事。我使用了这种带有停止和重置功能的秒表类型

var clsStopwatch = function() {
        // Private vars
        var startAt = 0;    // Time of last start / resume. (0 if not running)
        var lapTime = 0;    // Time on the clock when last stopped in milliseconds

        var now = function() {
                return (new Date()).getTime(); 
            }; 

        // Public methods
        // Start or resume
        this.start = function() {
                startAt = startAt ? startAt : now();
            };

        // Stop or pause
        this.stop = function() {
                // If running, update elapsed time otherwise keep it
                lapTime = startAt ? lapTime + now() - startAt : lapTime;
                startAt = 0; // Paused
            };

        // Reset
        this.reset = function() {
                lapTime = startAt = 0;
            };

        // Duration
        this.time = function() {
                return lapTime + (startAt ? now() - startAt : 0); 
            };
    };

var x = new clsStopwatch();
var $time;
var clocktimer;

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 show() {
    $time = document.getElementById('time');
    update();
}

function update() {
    $time.innerHTML = formatTime(x.time());
}

function start() {
    clocktimer = setInterval("update()", 1);
    x.start();

}

function stop() {
    x.stop();
    clearInterval(clocktimer);
}

function reset() {
    stop();
    x.reset();
    update();
}

任何秒表类型都可以，只要它具有启动-停止-重置功能

【问题讨论】：

标签： javascript stopwatch

【解决方案1】：

如果您想使用上面的代码，您可以为您的秒表对象编写一个包装器，看起来像这样......

var stopWatchBeeper = function(beepEveryMs, stopWatch, checkEveryMs) {

        var nextInterval = 0;

        var beepIfNeedTo = function() {
            if (stopWatch.time() >= nextInterval) {
                alert("beep");
                nextInterval = beepEveryMs + nextInterval;
            }
        }

        this.watch = function() {
            clearInterval(beepIfNeedTo);
            nextInterval = 0;
            nextInterval = beepEveryMs + nextInterval;
            setInterval(beepIfNeedTo, checkEveryMs);
        }

        this.reset = function() {
            clearInterval(beepIfNeedTo);
        }
    }

查看https://codepen.io/peterpde/pen/qMjjrL的工作

【讨论】：