代码之家 › 专栏 › 技术社区 › kevtrout

每分钟显示当前时间(使用Prototype的Ajax.PeriodicalUpdater?)

prototypejs javascript

kevtrout · 技术社区 · 17 年前

我有一个应用程序,显示页面打开的当前时间。我希望这段时间每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。我缺少什么?

4 回复 | 直到 14 年前

James Orr 17 年前

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

thoughtcrimes 17 年前

这可以在不影响服务器的情况下完成。Prototype的PeriodicalExecute类封装了JavaScript的setInterval函数,它允许您每X秒运行一个JavaScript函数。

时间.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();
};

Serxipc 17 年前

可能是Prototype的Ajax。更新程序更改元素的内容,而不是输入的值。

尝试更改

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

向

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

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

kevtrout 17 年前

谢谢你的意见。你们向我指出了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="">