html循环计时提醒

做个康复锻炼计时提示器

	没有一丁点技术含量，主要是给手受伤需要锻炼的老妈有一丝丝帮助，所以小记录下。作用是每一分钟开始或暂停锻炼并提示语音，在此期间保持屏幕不灭，到20分钟（间隔锻炼10分钟）结束自动关闭网页。

直接的代码html

包括了一个按钮，三个提示音,提示音用的百度翻译音频。

    <input type="button" value="开始锻炼" id="click3" onclick="foo(this);" style="width: 300px; height: 500px;background: rgb(235, 204, 104);">

    <audio id="ksdl" preload="auto">  
        <source src="ksdl.mp3" type="audio/mp3">
        
    audio>

    <audio id="zbxx" preload="auto">  
        <source src="zbxx.mp3" type="audio/mp3">
        
    audio>
    <audio id="dlwc" preload="auto">  
        <source src="ok.mp3" type="audio/mp3">
    audio>

直接的代码js

用两个循环计时嵌套达到轮流效果，用nosleep.js(需要下载)保持常亮

<script>
    
    var count=9;//共十次

    function foo(obj){
       
        

        obj.disabled = true;
        document.getElementById("ksdl").play();
        document.getElementById("click3").value="还剩"+count+"次";
        
        setTimeout(function(){document.getElementById("zbxx").play();},31000);
        setInterval("play1()",62000);

        setTimeout(function(){setInterval("play2()",62000)},31000);


    }
    function play1(){
        count--;
        
        document.getElementById("click3").value="还剩"+count+"次";
        document.getElementById("ksdl").play();
    }
    function play2(){
        if(count==0){
            document.getElementById("dlwc").play();
            
            setTimeout(function(){window.close()},3000);
        }else{
        document.getElementById("zbxx").play();}
    }
    


</script>


<script type="text/javascript" src="NoSleep.js"></script>

<script>
var noSleep = new NoSleep();

function enableNoSleep() {
  noSleep.enable();
  document.removeEventListener('click', enableNoSleep, false);
}

document.addEventListener('click', enableNoSleep, false);

noSleep.disable();
</script>

使用

把用到的资源文件发到手机上，放在同一文件夹中，这里我使用了qq浏览器打开html页面，并创建了桌面快捷图标，效果就与单机小apk无异了（吗）。。。。