2013-06-10 2 views
0

В настоящее время я получил страницу, получая поданную информацию из базы данных MySQL, который обновляются по хронам каждые 5 минутStatic Повторяющегося Обратного отсчета

Я хотел бы получить на странице обновляется каждые пять минут, но также показывает, видимый отсчет пользователи в «Следующее обновление»

Ниже приведен код, который я использую в настоящее время, но я не уверен, как сделать его статическим - так как в момент, когда пользователь обновляет страницу, он просто перезапускает обратный отсчет.

Буду признателен за любую предоставленную помощь, даже если вы не знаете, с чего начать.

Благодаря

<script> 
    var Timer; 
    var TotalSeconds; 

    function CreateTimer(TimerID, Time) { 
     Timer = document.getElementById(TimerID); 
     TotalSeconds = Time; 
     UpdateTimer() 
     window.setTimeout("Tick()", 1000); 
    } 

    function Tick() { 
     if (TotalSeconds <= 0) { 
      Timer.innerHTML = " Time's up "; 
      window.setTimeout("Tick", 1000); 
      CreateTimer("timer", 5) 
      return; 
     } 

     TotalSeconds -= 1; 
     UpdateTimer() 
     window.setTimeout("Tick()", 1000); 
    } 

    function UpdateTimer() { 
     var Seconds = TotalSeconds; 
     var Days = Math.floor(Seconds/86400); 
     Seconds -= Days * 86400; 

     var Hours = Math.floor(Seconds/3600); 
     Seconds -= Hours * (3600); 
     var Minutes = Math.floor(Seconds/60); 
     Seconds -= Minutes * (60); 
     var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds); 
     Timer.innerHTML += " " + TotalSeconds; 
     Timer.innerHTML = TimeStr; 
    } 

    function LeadingZero(Time) { 
     return (Time < 10) ? "0" + Time : +Time; 
    } 
</script> 
<div id="timer" > 
<script type="text/javascript">window.onload = CreateTimer("timer", 5);</script> 
</div > 
+0

Не мог бы вы уточнить, что вы имеете в виду с «статическим» в этом контекст? Вы хотите, чтобы он продолжал отсчет одновременно, после того как пользователь явно нажал F5? –

+0

Да, я хочу это в основном так, чтобы он помнил время для всех пользователей, не уверен, что это можно сделать с помощью javascript, но если пользователь нажимает F5, скажем, 3 минуты 15 секунд, сценарий будет помнить, в какое время он был включен. – user1870633

+0

Вы должны действительно сделать это на сервере, вместо того чтобы полагаться на клиентский код. Если cron очищает его в определенное время, должно быть легко рассчитать время до следующего экземпляра в коде визуализации страницы. –

ответ

0

использование beforeunload сохранить текущее состояние в куки, а затем продолжить форму там.

вот пример (и изящнее :-) таймер)

<html> 
<head> 
    <title></title> 

    <script src="http://rawgithub.com/timseverien/cm.js/master/cm.js"></script> 
</head> 
<body> 

<div id="time"></div> 

<script type="text/javascript"> 

(function(){ 
    var Timer = window.Timer = function(t, el, cookie){ 
     this.cookie = cookie || false; 
     this.el = el; 
     this.t = this.cookie&&CM.get('t') || (t * 60 * 1000); 
     this.d = new Date(this.t); 
     this.event = new CustomEvent('onend'); 

     this.show(); 

     return this.el; 
    } 

    //https://gist.github.com/aemkei/1180489 
    Timer.prototype.pad = function(a,b){return([1e15]+a).slice(-b)}; 
    Timer.prototype.format = function(){ 
     return this.pad(this.d.getMinutes(), 2) + ':' + this.pad(this.d.getSeconds(), 2); 
    } 
    Timer.prototype.show = function(){ 
     var self = this; 


     window.addEventListener('beforeunload', function(event) { 
      self.cookie&&CM.set('t', self.t); 
     }, false); 

     self.el.innerHTML = self.format(); 

     setTimeout(function(){ 
      self.t -= 1000; 
      self.d = new Date(self.t); 

      if(self.t > 0) 
       self.show(); 
      else{ 
       CM.clear(); 
       self.el.innerHTML = self.format(); 
       self.el.dispatchEvent(self.event); 
      } 
     }, 1000) 
    } 
})(); 

var timer = new Timer(5, document.getElementById('time'), true); 
timer.addEventListener('onend', function(e){ 
    alert('timer is ended! (you can refresh here)'); 
    //location.reload(); 
}, false) 
</script> 
</body> 
</html> 

здесь живой пример (без печенья) http://jsfiddle.net/55p7f/

Смежные вопросы