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

每分钟显示当前时间(使用原型的ajax.periodicalUpdater?)

prototypejs javascript

kevtrout · 技术社区 · 16 年前

我有一个应用程序显示当前页面打开的时间。我希望每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 回复 | 直到 12 年前

James Orr 16 年前

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

这可以在不触动服务器的情况下完成。Prototype的Periodicalexecuter类封装了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>

时间,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 16 年前

可能是原型的ajax.updater更改了元素的内容,而不是输入的值。

尝试更改

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

到

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

但正如其他人所建议的,每30秒点击一次服务器,只更新时间是多余的。如果您不想在服务器时区中显示时间,只需在构建页面时使用服务器时间创建输入,并使用 setInterval 来自javascript。

kevtrout 16 年前

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