PHP JavaScript倒计时计时器

Question

我需要做一个倒计时计时器，它显示倒计时的特定分钟和秒数--而不是某个日期的倒计时。

根据变量的不同，更改这些数字。

所以对于$video == 1，我需要在页面上显示：8 minutes & 54 seconds (倒计时)

对于$video == 2，我需要在页面上显示：5 minutes & 01 seconds (倒计时)

我还需要倒计时显示在时间过去后消失，但也许我应该把它放在一个不同的问题中。

我遇到的问题是，我能找到的所有倒计时脚本都在处理特定日期的倒计时。

Answer 1

您需要的一切，只需在<span>标记中输入总时间(以秒为单位)。30和120在这里演示。如果您直接复制并粘贴到网页中，应该可以工作。根据需要添加和编辑代码。

<span id="countdown-1">30 seconds</span>
<span id="countdown-2">120 seconds</span>
<script type="text/javascript">
    // Initialize clock countdowns by using the total seconds in the elements tag
    secs       = parseInt(document.getElementById('countdown-1').innerHTML,10);
    setTimeout("countdown('countdown-1',"+secs+")", 1000);
    secs       = parseInt(document.getElementById('countdown-2').innerHTML,10);
    setTimeout("countdown('countdown-2',"+secs+")", 1000);

    /**
     * Countdown function
     * Clock count downs to 0:00 then hides the element holding the clock
     * @param id Element ID of clock placeholder
     * @param timer Total seconds to display clock
     */
    function countdown(id, timer){
        timer--;
        minRemain  = Math.floor(timer / 60);
        secsRemain = new String(timer - (minRemain * 60));
        // Pad the string with leading 0 if less than 2 chars long
        if (secsRemain.length < 2) {
            secsRemain = '0' + secsRemain;
        }

        // String format the remaining time
        clock      = minRemain + ":" + secsRemain;
        document.getElementById(id).innerHTML = clock;
        if ( timer > 0 ) {
            // Time still remains, call this function again in 1 sec
            setTimeout("countdown('" + id + "'," + timer + ")", 1000);
        } else {
            // Time is out! Hide the countdown
            document.getElementById(id).style.display = 'none';
        }
    }
</script>

Answer 2

 <?php 
 $countDownTime = 0;
 if ($video == 1) $countDownTime = (8*60 + 54);
 else if ($video == 2) $countDownTime = (5*60 + 1);
 echo '<script>var countdownTime="' . $countDownTime . '";</script>"'; 
 ?>

 <script>
 <!-- as per the hyper linked reference below -->
 $(selector).countdown({until: countdownTime});
 </script>

通过下面的库，您可以使用上面指定的var countdownTime实现一个JQuery计时器...

http://keith-wood.name/countdown.html <--第一页上的教程！

编辑用$countDownTime替换了$someTimeInSeconds

Answer 3

尝试：

var x, secs = 600; //declared globally

x = setInterval(myFunc, 1000);

function myFunc()
{
    document.getElementById('timer').innerHTML =  secs; //assuming there is a label with id 'timer'
    secs --;
    if(secs == 0)
    {
        document.getElementById('timer').style.hidden = true;
        clearInterval(x);
    }
}