Отображать текущее время каждую минуту (с помощью Ajax.PeriodicalUpdater Prototype?) - PullRequest
Новая
       15

Отображать текущее время каждую минуту (с помощью Ajax.PeriodicalUpdater Prototype?)

3 голосов
/ 03 декабря 2008

У меня есть приложение, которое отображает текущее время, когда открывается страница. Я хотел бы, чтобы это время обновлялось каждые 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 вызывает идентификатор элемента. Чего мне не хватает?

Ответы [ 4 ]

3 голосов
/ 03 декабря 2008

Если вы не хотите, чтобы вывод времени всегда соответствовал часовому поясу сервера, вы могли бы сделать это очень быстро, добавив немного 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 голос
/ 15 декабря 2008

Спасибо за ввод. Вы, ребята, указали мне на нативную способность javascript передавать время в поле ввода. В конце концов, это 24-часовое решение от 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="">
1 голос
/ 04 декабря 2008

Возможно, Ajax.Updater Prototype изменяет содержимое элемента, а не значение ввода.

Попробуйте изменить 

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

до 

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

Но, как предлагали другие, попадание на сервер каждые 30 секунд только для обновления времени является излишним. Если вы не хотите отображать время в часовом поясе сервера, просто создайте ввод со временем сервера при построении страницы и обновите это время с помощью setInterval из JavaScript.

1 голос
/ 04 декабря 2008

Это может быть выполнено без подключения к серверу. Класс PeriodicalExecuter прототипа инкапсулирует функцию JavaScript setInterval, которая позволяет запускать функцию JavaScript каждые X секунд.

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();
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...