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

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

3 个答案: