[英]refreshing Div with php code inside?
我試圖使用下面的代碼每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是holder,它是這樣的:
<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。
還有什么我需要做的,還是我想念什么?
得到-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>
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>
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.