PHP JavaScript 倒数计时器答案

【问题标题】：PHP JavaScript Countdown TimerPHP JavaScript 倒数计时器
【发布时间】：2011-07-15 19:18:12
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你有你正在尝试的代码吗？
我在这方面遇到了很大的困难，并且不理解我收到的任何回复。也许我可以为每个人简单地使用它......有没有办法让我显示在线一分钟和秒倒数计时器？它可以是 JS 或 PHP，只要我可以在代码块内设置分钟和秒。然后我可以在 $video 变量的 if 语句中重复它。我知道这不是最好的方法，但对我来说没有任何意义。
所以，如果有人能给我一个独立的（没有库，没有外部脚本等）代码块，它会显示 X min & Y sec（倒计时），那就太棒了！
我要放弃这个了。这超出了我的范围。谢谢大家试图帮助我。 :)

标签： php javascript countdown

【解决方案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>

【讨论】：

【解决方案2】：

试试：

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);
    }
}

【讨论】：

我一点也不明白。这是 JavaScript 吗？不同视频的变量在哪里？以及如何在页面上显示倒计时？
@Dustin 是的，它是 javascript。我的代码倒计时 600 秒（5 分钟）。如果您想知道如何，我建议您查找 setInterval 因为我不想剥夺您的学习经验。从这里开始，根据 $video 调整倒计时时间一定很简单。
我看不到它在页面上的显示方式。它会分分钟和秒吗？还是几分钟？
@Dustin 如果在 HTML 中定义了一个标签，如<label id='timer'>timer not started</label>，document.getElementById('timer').innerHTML = secs; 将用秒数替换“计时器未启动”。如果要将其显示为分和秒，只需简单的数学运算即可。

【解决方案3】：

http://javascript.internet.com/time-date/countdown-timer.html 有一个倒计时脚本，它不会倒计时到日期，而是倒计时到指定的分钟数。

代码可以自定义如下，得到想要的效果

<?php
 if ($video===1){
    $time="8:54";
 }
 if ($video===2){
    $time="5:01";
 }


?>

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

    <form name="cd">
    <input id="txt" readonly="true" type="text" value="<?php echo $time; ?>" border="0" name="disp">
    </form>

确保 countDown.js 的内容如下所示：

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php */

var mins
var secs;

function cd() {
    mins = 1 * m("10"); // change minutes here
    secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
    redo();
}

function m(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(0, i));
}

function s(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
    var disp;
    if(mins <= 9) {
        disp = " 0";
    } else {
        disp = " ";
    }
    disp += mins + ":";
    if(secs <= 9) {
        disp += "0" + secs;
    } else {
        disp += secs;
    }
    return(disp);
}

function redo() {
    secs--;
    if(secs == -1) {
        secs = 59;
        mins--;
    }
    document.cd.disp.value = dis(mins,secs); // setup additional displays here.
    if((mins == 0) && (secs == 0)) {
        window.alert("Time is up. Press OK to continue."); // change timeout message as required
        // window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
    } else {
        cd = setTimeout("redo()",1000);
    }
}

function init() {
  cd();
}
window.onload = init;

【讨论】：

这个节目8点54分，但是没有倒计时。然后它变成了 10:00 并且没有倒计时。
您可能将错误信息复制到 countDown.js 中，我已编辑帖子以反映这一点。

【解决方案4】：

 <?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

编辑将 $someTimeInSeconds 替换为 $countDownTime

【讨论】：

我不太了解如何使用该库，也不了解变量 $someTimeinSeconds 的设置位置。

【解决方案5】：

好的，我正在考虑做类似的事情。目前我有一个简单的倒计时计时器，它基于当前时间，每 30 分钟倒计时一次。问题是我必须使用元刷新来更新它。我想知道 javascript 和 PHP 的组合是否可能是这个答案的更简单的解决方案。使用javascript调用php代码并自动更新？也许在要使用javascript调用的php脚本中设置一个变量？好吧，这是我可能有帮助的代码。我还在学习。

$minutes_left = ($minutes)?((30 - $minutes)-(($seconds)?1:0)):0;
$minutes_left = str_pad ($minutes_left , 2, '0', STR_PAD_LEFT);

$seconds_left = ($seconds)?(60 - $seconds):0;
$seconds_left = str_pad ($seconds_left , 2, '0', STR_PAD_LEFT);

echo '<center><h1 style="font-color:white;">Next station break in: '.$minutes_left.'m '.$seconds_left.'s</h2></center>';

?>

我只需要弄清楚如何让它在每 30 分钟结束时自行重置，并在不刷新元数据的情况下进行更新。

【讨论】：