JavaScript计时器问题 - 计算2秒间隔时间&声音没有播放

时间:2014-11-20 09:48:18

标签: javascript php jquery raspberry-pi countdown

我正在使用JavaScript,Jquery和PHP混合制作倒数计时器,用于课堂计时器。它是连接到LG电视的覆盆子pi。当我运行我的代码时出现了一些不寻常的错误......出现了一些但不是所有的时间。

这是我的代码......

$("#start").click(function(){
    $("#start").attr("disabled", "disabled");
    $("#start").html("Resume");
    $("#stop").removeAttr("disabled",null);
    $("#storage").html("start");
    dec();
})

var file = document.getElementById("alert"); 



var time = prompt("Please specify the time in minutes:");
var minutes = time - 1;
var secs = 59;
var displayMins = minutes;


$("#stop").click(function(){
    $("#stop").attr("disabled", "disabled");
    $("#start").removeAttr("disabled",null);
    $("#storage").html("stop");
})

$("#reset").click(function(){
    $("#stop").attr("disabled", "disabled");
    $("#start").removeAttr("disabled",null);
    $("#storage").html("reset");
   dec();
})


function dec() {
    if($("#storage").html() != "stop" && $("#storage").html() != "reset" ){



    if(secs <= 0){
       secs = 59;
        displayMins = displayMins - 1;
    }
    if(displayMins < 10){
        $("#timer").html("0" + displayMins + ":" + secs);
    } 
    if(secs < 10){
        $("#timer").html(displayMins + ":" + "0" + secs);
    }
    if(secs < 10 && displayMins < 10){
        $("#timer").html("0" + displayMins + ":" + "0" + secs);
    }
    if(secs > 10 && displayMins > 10){
        $("#timer").html(displayMins + ":" + secs);
    }
    secs = secs - 1;
    setTimeout(function(){
        if(secs >= 1 && displayMins >= 0){
          dec();  
        } else if(secs == 0 && displayMins == 0){
            var audio = new Audio('airhorn.mp3');
            audio.play();
            $("#timer").html("00:00");
            $("#timer").css("color", "red");

        }

    }, 1000);
} else if($("#storage").html() == "reset"){
    $("#start").removeAttr("disabled",null);
    $("#start").html("Start");
    $("#stop").attr("disabled", "disabled");
    secs = 59;
    displayMins = minutes;
     $("#timer").html("00:00");

    $("#timer").css("color", "white");
}

}

这是我的PHP代码......

<html>
<head>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <link href="style/style.css" type="text/css" rel="stylesheet" />
    <title>Mr. George's Timer</title>
    <script type="text/javascript" src="scripts/reload.js"></script>
</head>
<body>
    <h1>
        Mr. George's Timer
    </h1>
    <div id="timer">
        00:00
    </div>

    <button id="start" onclick="dec();">Start</button>
     <button id="stop" disabled="disabled">Stop</button>
     <button id="reset">Reset</button>
     <br /><br />
     <audio id="alert">
      <source src="airhorn.mp3" type="audio/mpeg" id="alert">
    </audio>
     <!-- <select name="type" id="timeSelector">
             <option value="5">5min</option>
            <option value="10">10 min</option>
            <option value="15">15 min</option>
            <option value="20">20 min</option>
            <option value="25">25 min</option>
            <option value="30">30 min</option>
            <option value="35">35 min</option>
            <option value="40">40 min</option>
            <option value="45">45 min</option>
            <option value="50">50 min</option>
            <option value="55">55 min</option>
            <option value="60">60 min</option>
     </select> !-->
    <script type="text/javascript" src="scripts/watch.js"></script>
    <br />
    <br />
    <br />
    <br />
    <label id="storage">storage</label>
    <label id="timestorage">5</label>
</body>

我的错误

  1. 当我运行该程序时,它会以两秒的间隔倒计时,这种情况发生在大多数情况,但不是所有时间。

  2. 当我在计时器上运行程序五分钟时,它总是停在“4:01”。

  3. 当倒数计时器变为零时,“airhorn.mp3”声音文件无法播放。

  4. 如果您需要更多详细信息,请发表评论,我会尽快回复。

    谢谢你的帮助!

0 个答案:

没有答案