html循环计时提醒

不想下android studio,那就做个html算了

  • 做个康复锻炼计时提示器
    • 直接的代码html
    • 直接的代码js
    • 使用

做个康复锻炼计时提示器

	没有一丁点技术含量,主要是给手受伤需要锻炼的老妈有一丝丝帮助,所以小记录下。作用是每一分钟开始或暂停锻炼并提示语音,在此期间保持屏幕不灭,到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无异了(吗)。。。。

你可能感兴趣的:(笔记,javascript,html,web,web,app)