Question

我正在尝试使用下面的代码每隔x秒刷新一次div：

div只包含一个小的时区PHP代码。

这是我正在使用的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>

        <script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#holder').load('<?php
date_default_timezone_set('Australia/Sydney');
echo  'Current Time In Australia:' . date('H:i:s.A') . PHP_EOL;
$date = date('m/d/Y h:i:s a', time());
echo date('d/m/Y', time());
?>').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>

div id是持有者，它是这样的：

<div id="holder" style="color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:44px; font-weight:bold;"><?php
date_default_timezone_set('Australia/Sydney');
echo  'Current Time In Australia:' . date('H:i:s.A') . PHP_EOL;
$date = date('m/d/Y h:i:s a', time());
echo date('d/m/Y', time());
?></div>

遗憾的是，上面的代码根本没有刷新Div。

还有什么我需要做的或者我错过了什么吗？

Answer 1

GET-date.php：

<?php
date_default_timezone_set('Australia/Sydney');
echo 'Current Time In Australia:' . date('H:i:s.A') . PHP_EOL;
$date = date('m/d/Y h:i:s a', time()); // not sure what this is doing!
echo date('d/m/Y', time());

新脚本：

<script type="text/javascript">
var auto_refresh = setInterval(function(){
    $('#holder').load('get-date.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>

或者作为一个寻呼机，将其置于所有其他代码

之上

<?php
if (isset($_GET['show_date']))
{
    date_default_timezone_set('Australia/Sydney');
    echo 'Current Time In Australia:' . date('H:i:s.A') . PHP_EOL;
    $date = date('m/d/Y h:i:s a', time()); // not sure what this is doing!
    echo date('d/m/Y', time());
    exit;
}
?>

然后使用此脚本

<script type="text/javascript">
    var auto_refresh = setInterval(function(){
        $('#holder').load('<?php echo $_SERVER['PHP_SELF'];?>?show_date').fadeIn("slow");
    }, 10000); // refresh every 10000 milliseconds
</script>

Answer 2

PHP是服务器端语言，它不能在客户端工作.. 你正试图展示我希望的时间..

<script>
$(document).ready(function() {



// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year   
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
    },1000);

setInterval( function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);

setInterval( function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);   
});

</script>

CSS / ----------------------------- /

 .clock_home a{
        font-size:18px;
    }
    a:hover,a:focus{
        text-decoration: none!important;
    }
    .clock_home{
        float:right;
        width: 300px;
    }
    .clock {

        height:25px;
        width: 260px;
        margin: 10px 20px  auto auto;
        padding: 10px;
        border: 1px solid #eee;
        color: #0088CC;
    }

    #Date {
        font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
        font-size:16px;
        text-align: center;
        float: left;
        margin-right: 15px;
        /*text-shadow: 0 0 5px #00c6ff;*/
    }

    .clock ul {
        margin: 0 auto;
        padding: 0px;
        list-style: none;
    }

    .clock ul li {
        display: inline;
        text-align: center;
        float:left;
        font-size:16px;
        font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
        /*text-shadow: 0 0 5px #00c6ff;*/
    }

    #point {
        position: relative;
        -moz-animation: mymove 1s ease infinite;
        -webkit-animation: mymove 1s ease infinite;
    }

    /* Simple Animation */
    @-webkit-keyframes mymove {
        0% {opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    }

    50% {
        opacity: 0;
        text-shadow: none;
    }

    100% {
        opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    }   
    }

    @-moz-keyframes mymove {
        0% {
            opacity: 1.0;
            text-shadow: 0 0 20px #00c6ff;
        }

        50% {
            opacity: 0;
            text-shadow: none;
        }

        100% {
            opacity: 1.0;
            text-shadow: 0 0 20px #00c6ff;
        };
    }

HTML

 <div class="clock">
            <div id="Date"></div>
              <ul>
                  <li id="hours"></li>
                  <li id="point">:</li>
                  <li id="min"></li>
                  <li id="point">:</li>
                  <li id="sec"></li>
              </ul>
            </div>

Answer 3

count=0;
var countdown = setInterval(function(){
    $("p.countdown").html("Changes Saved, Redirecting..");
    if (count == 0) {
      clearInterval(countdown);

        $.post("get-date.php",{},function(data,success){$('#target_div').html(data);})
    }
    count--;
  }, 1000);

用PHP代码刷新Div？

3 个答案: