码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-24 21:53:35      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:播放   bsp   floor   pause   timer   点击   pre   play   fun   

要让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>

 

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

标签:播放   bsp   floor   pause   timer   点击   pre   play   fun   

原文地址:https://www.cnblogs.com/lhseo/p/12770196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!