Question

我有一个应用程序，显示页面打开时的当前时间。我希望那个时间每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。我错过了什么？

Answer 1

除非您希望您的时间输出始终与服务器的时区匹配，否则您可以在客户端使用一些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>

Answer 2

这可以在不点击服务器的情况下完成。 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();
};

Answer 3

Prototype的Ajax.Updater可能会更改元素的内容，而不是输入的值。

尝试更改

<input id="updater" class="standard" type="text" name="end_time" 
           value="">

到

 <span id="updater"></span>

但正如其他人所建议的那样，每30秒点击一次服务器只是为了更新时间是过度的。如果您不想在服务器时区显示时间，只需在构建页面时使用服务器时间创建输入，并使用javascript中的setInterval更新此时间。

Answer 4

感谢您的投入。你们指的是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="">

每分钟显示当前时间（使用Prototype的Ajax.PeriodicalUpdater？）

4 个答案: