当计时器到达 0 时隐藏 PHP 倒数计时器

Question

我有这个 PHP 倒数计时器脚本，我试图让 JQuery 在计时器达到 0 天、0 小时、0 分钟、0 秒时隐藏它。我知道这里可以使用 JQuery show() 和 hide() 函数，但是我不知道当 PHP 倒数计时器达到 0 时如何触发这些 JQuery 函数。

PHP 代码：

$secs = strtotime("2013-06-23 17:00:00 +1 GMT") - time();

$days = floor($secs / 86400);
$secs %= 86400;

$hours = floor($secs / 3600);
$secs %= 3600;

$mins = floor($secs / 60);
$secs %= 60;

    echo "<div class='value'>$days<br><p class='time'>Days</p></div>";
    echo "<div class='value'>$hours<br><p class='time'>Hours</p></div>";
    echo "<div class='value'>$mins<br><p class='time'>Mins</p></div>";
    echo "<div class='value'>$secs<br><p class='time'>Secs</p></div>";

?>

我正在使用的 JQuery：

$(document).ready(function(){
     setInterval(function(){
        $("#timer").load("date.php");
     });
});

倒计时显示在这个div中：

<div id="timer"></div>

Answer 1

我已经改用 JSON 重写了您的代码。这里是：

HTML：

<div class="countdown">
    <div class="days"><span>$days</span><br> <p>Days</p></div>";
    <div class="hours"><span>$hours</span><br> <p>Hours</p></div>";
    <div class="minutes"><span>$mins</span><br> <p>Mins</p></div>";
    <div class="seconds"><span>$secs</span><br> <p>Secs</p></div>";
</div>

JS：

$.getJSON("date.php").done(function(data){
    if(data.zero){
        // timer is 0 so hide
        $('.countdown').fadeOut();
    }else{ 
        $('.countdown').fadeOut(function(){
            $(this).find('.days span').html(data.days);
            $(this).find('.hours span').html(data.hours);
            $(this).find('.minutes span').html(data.minutes);
            $(this).find('.seconds span').html(data.seconds);
            $(this).fadeIn();
        });
    }
}).fail(function(){
    // if it fails this function will be called
});

PHP：

<?php

$json = array();
$json['seconds'] = strtotime("2013-06-23 17:00:00 +1 GMT") - time();

$json['days'] = floor($secs / 86400);
$json['seconds'] %= 86400;

$json['hours'] = floor($secs / 3600);
$json['seconds'] %= 3600;

$json['minutes'] = floor($secs / 60);
$json['seconds'] %= 60;

$json['zero'] = array_sum($json) > 0 ? false : true;

echo json_encode($json)

?>

Answer 2

如前所述，您可以完全使用 Javascript。

如果您确实希望使用 PHP + Javascript，您需要扩展您的计时器回调来解析时间。以这个问题为例：

javascript: how to parse a date string

一旦你解析了时间的各个部分，如果计时器达到零，你就可以使用 hide()。

使用 jQuery，您可以像这样解析时间部分：

var days = $("#timer .value").eq(0).html();
var hours = $("#timer .value").eq(1).html();
var mins = $("#timer .value").eq(2).html();
var secs = $("#timer .value").eq(3).html();

但是，您需要将值本身放在单独的 div 中，例如：

echo "<div class='value'>$days</div><div><br><p class='time'>Days</p></div>";
echo "<div class='value'>$hours</div><div><br><p class='time'>Hours</p></div>";
echo "<div class='value'>$mins</div><div><br><p class='time'>Mins</p></div>";
echo "<div class='value'>$secs</div><div><br><p class='time'>Secs</p></div>";

这样，您可以获取值 div 的全部内容，而无需将其包含的值分解为块。如果您绝对必须将所有内容都放在同一个 div 中，则可以使用 Javascript 的 split() 函数拆分 div 内容：

http://www.w3schools.com/jsref/jsref_split.asp

Answer 3

你可以用 jQuery 来隐藏它……像这样：

$(document).ready(function(){
    if ($("#timer:contains('0 days, 0 hours, 0 mins, 0 secs')").length) {
    $("#timer").hide();
    }
});

Demo