我有一个应用程序,显示页面打开时的当前时间。我希望那个时间每30秒更新一次。我已经阅读了关于原型的Ajax.PeriodicalUpdater,它似乎是一个答案。这就是我使用php实现页面加载时静态时间显示的方法:
<tr>
<td>
<input class="standard" type="text" name="start_time"
value="<?php echo prev_end();?>">
<!--prev_end is last end time from database-->
</td>
<td>
<input class="standard" type="text" name="end_time"
value="<?php echo $now;?>">
<!--$now = date("G:i");-->
</td>
这是我用原型尝试过的:
<script type="javascript">
new Ajax.PeriodicalUpdater("updater", "unow.php", {frequency : 30});
</script>
...
<tr>
<td>
<input class="standard" type="text" name="start_time"
value="<?php echo prev_end();?>">
</td>
<td>
<input id="updater" class="standard" type="text" name="end_time"
value="">
</td>
“unow.php”执行此操作
<?php
$unow=date("G:i");
echo $unow;
?>
似乎我不需要回调来将unow.php中的值放入输入“updater”,因为PeriodicalUpdater会调用元素id。我错过了什么?
答案 0 :(得分:3)
除非您希望您的时间输出始终与服务器的时区匹配,否则您可以在客户端使用一些Javascript快速完成此操作,并跳过完全联系服务器。
<html>
<body onload="init();">
<div id=time></div>
</body>
</html>
<script type=text/javascript>
function init()
{
updateTime();
window.setInterval(updateTime,30000);
}
function updateTime()
{
var time = document.getElementById('time');
time.innerText = new Date().toLocaleString();
}
</script>
答案 1 :(得分:1)
这可以在不点击服务器的情况下完成。 Prototype的PeriodicalExecuter类封装了JavaScript的setInterval函数,该函数允许您每隔X秒运行一次JavaScript函数。
<强>为time.html 强>
<html>
<head>
<title>Time</title>
<script type="text/javascript" src="time.js">
</head>
<body>
<span id="timeDisplay"></span>
</body>
</html>
time.js
document.observe("dom:loaded", function() {
new PeriodicalExecuter(updateTimeDisplay, 30);
});
updateTimeDisplay = function(pe) { // accepts the PeriodicalExecuter instance
var now = new Date();
$('timeDisplay').innerHTML = now.toString();
};
答案 2 :(得分:1)
Prototype的Ajax.Updater可能会更改元素的内容,而不是输入的值。
尝试更改
<input id="updater" class="standard" type="text" name="end_time"
value="">
到
<span id="updater"></span>
但正如其他人所建议的那样,每30秒点击一次服务器只是为了更新时间是过度的。如果您不想在服务器时区显示时间,只需在构建页面时使用服务器时间创建输入,并使用javascript中的setInterval
更新此时间。
答案 3 :(得分:1)
感谢您的投入。你们指的是javascript本地能够将时间输入到输入框。最后,this 24-hour clock solution from w3schools对我有用。
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('endtime').value=h+":"+m;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
然后在体内:
<input id="endtime" class="standard" type="text" name="end_time" value="">