Javascript倒计时在达到零时错过了一个事件

时间:2015-02-15 22:58:19

标签: javascript javascript-events getelementbyid countdown

尝试在时间到达0和几个小时时显示消息,因为一周包含594000秒,我想要消息"它是啤酒的时间" var" secs"大于594000秒(所以它会在星期五下午4点到晚上7点左右显示消息,因为计数器在下午4点重置,秒将在604800和594000秒之间。

我创建的功能ALERTB似乎没有显示该消息。我是javascript的新手,尝试搜索并尽可能需要帮助,可能是做了一个简单的错误...

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type = "text/javascript">

var cday;
var timeInSecs;
var ticker;

function getSeconds() {
    var now = new Date();
    var nowtime = now.getTime(); // time now in milliseconds
    var countdowntime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16, 0, 0); //  16 hrs = 4 pm
    // countdowntime - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)

    var dy = 5; // Friday (day 5) - change for other days 0-6
    var atime = countdowntime.getTime();
    var diff = parseInt((atime - nowtime) / 1000); // positive if date is in future
    if (diff > 0) {
        cday = dy - now.getDay();
    } else {
        cday = dy - now.getDay() - 1;
    }
    if (cday < 0) {
        cday += 7;
    } // aleady passed countdown time, so go for next week
    if (diff <= 0) {
        diff += (86400 * 7)
    }
    startTimer(diff);
}



function startTimer(secs) {
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()", 1000);
    tick(); // to start counter display right away
}

function alertb() { // PROBLEMATIC, DOESN'T SHOW 
    var secs = timeInSecs;
    while (secs > 0) {}
    document.getElementById("hb").innerHTML = "it's beer time !!!";
}

function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
        timeInSecs--;
    } else {
        clearInterval(ticker); // stop counting at zero
        getSeconds(); // and start all over again! 
    }

    var days = Math.floor(secs / 86400);
    secs %= 86400;
    var hours = Math.floor(secs / 3600);
    secs %= 3600;
    var mins = Math.floor(secs / 60);
    secs %= 60;
    var result = "Time remaining " + cday + ' day(s) ';
    result += ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds";
    document.getElementById("countdown").innerHTML = result;
}



</script>
</head>

<body onload = "getSeconds()">
<div id="maindiv" class="col-lg-6 col-lg-offset-3">
    <div id="title-countdown">
        <span class="bchewy col-lg-12" id="title">It's time for beer in ...</span>
    </div>
    <div id="container-countown">
        <span id="countdown" class="schewy col-lg-12"> </span>
        <span id="hourb" class="rchewy col-lg-12"> </span>
    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

你的alertb()函数没有做任何事情 - 它进入while循环while (secs>0)但是后来永远不会改变秒的值。因此,它会继续等待secs永远改变,永远不会退出循环。