用定时器实现一个闹钟功能

Posted 2021-02-22 lhseo

要让audio自动播放，需要和进行交互才能生效，所以添加了一个点击事件。缘由还不清楚。

 

    <div id="nav">
        <span>已过时间</span>
        <div id="bd"></div>
    </div>
    <audio src="../引用/music/借我--谢春花.mp3" id="target" controls></audio>
<script>
        var bd = document.getElementById(‘bd‘);
        var str = 0;
        document.onclick = function() {
            setInterval(() => {
                str += 1;
                bd.innerhtml = Math.floor(str / 3600) + ‘时‘ + Math.floor((str % 3600) / 60) + ‘分‘ + Math.floor((str % 3060) % 60) + ‘秒‘
            }, 1000);
            var audio = document.getElementById(‘target‘); 
            // 第一个定时器45分钟后执行
            setTimeout(() => {
                audio.play();
                setTimeout(function() {
                    audio.pause()
                }, 60000);
            }, 2700000);
            // 第二个定时器60分钟后执行
            setInterval(function() {
                audio.play();
                // 亦可以不清除定时器，因为在这个定时器执行结束前不会有相同的定时器执行，不会造成定时器的叠加
                clearTimeout(timer4);
                var timer4 = setTimeout(function() {
                    audio.pause()
                }, 60000);
            }, 3600000);
            // 第三个定时器105分钟后执行
            setTimeout(() => {
                setInterval(function() {
                    audio.play();
                    clearTimeout(timer2);
                    var timer2 = setTimeout(function() {
                        audio.pause()
                    }, 60000);
                }, 3600000)
            }, 6300000);
            // 之后两个setInterval调用间隔都是15分钟，实现45分钟的学习时间和15分钟的休息时间
        }
</script>