每分鐘顯示當前時間（使用Prototype的Ajax.PeriodicalUpdater？）

我有一個應用程序，顯示頁面打開時的當前時間。我希望每隔30秒更新一次。我讀過關於原型的Ajax.PeriodicalUpdater，它似乎是一個答案。我這是怎麼實現在頁面加載靜態時間顯示用PHP：每分鐘顯示當前時間（使用Prototype的Ajax.PeriodicalUpdater？）

<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; 
?>

由於PeriodicalUpdater調用元素ID，似乎我不需要回調來將unow.php中的值放入輸入「updater」。我錯過了什麼？

來源

2008-12-03 kevtrout

除非您希望您的時間輸出始終與服務器的時區匹配，否則您可以通過在客戶端使用一點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>

來源

2008-12-03 19:02:51

而這個解決方案沒有開箱的工作，但它並指出我傾向於使用獨立的JavaScript得到什麼我是後。這就是我將其標記爲答案的原因。 – kevtrout 2009-01-01 16:51:53

這可以在不打開服務器的情況下完成。 Prototype的PeriodicalExeter類封裝了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(); 
};

來源

2008-12-04 00:47:57 thoughtcrimes

大概Prototype的Ajax.Updater的改變元件，而不是輸入的值的內容。

嘗試改變

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

到

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

但正如其他人所說，擊中服務器中的每個30秒只更新時間是矯枉過正。如果您不想在服務器時區顯示時間，只需在構建頁面時使用服務器時間創建輸入，並使用javascript中的setInterval更新此時間。

來源

2008-12-04 18:27:45 Serxipc

感謝您的意見。你們向我指出了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="">

來源

2008-12-15 18:12:53 kevtrout

每分鐘顯示當前時間（使用Prototype的Ajax.PeriodicalUpdater？）

回答

相關問題