在javascript中顯示幾個計時器

我打算在不同的時間間隔內使用javascript在asp.net頁面中顯示幾個計時器，但所有計時器都以最後設置的時間間隔運行，我該怎麼做？在javascript中顯示幾個計時器

這裏是我使用的代碼：此代碼

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-  transitional.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
     <title>Untitled Page</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 

    function _timer(callback) 
      { 
     var time = 4500; 
     var mode = 1; 
     var status = 0; 
     var timer_id; 
     var sor; 
     // this will start the timer ex. start the timer with 1 second interval timer.start(1000) 
     this.start = function(interval) 
     { 

      interval = (typeof(interval) !== 'undefined') ? interval : 1000; 

      if(status == 0) 
      { 
       status = 1; 

       timer_id = setInterval(function() 
       { 
        switch(mode) 
        { 
         default: 
         if(time) 
         { 
          time--; 
          generateTime(); 
          if(typeof(callback) === 'function') callback(time); 
         } 
         break; 

         case 1: 
         if(time < 86400) 
         { 
          time++; 
          generateTime(); 
          if(typeof(callback) === 'function') callback(time); 
         } 
         break; 
        } 
       }, interval); 
      } 
     } 
     // Same as the name, this will stop or pause the timer ex. timer.stop() 
     this.stop = function() 
     { 
      if(status == 1) 
      { 
       status = 0; 
       clearInterval(timer_id); 
      } 
     } 

     // Reset the timer to zero or reset it to your own custom time ex. reset to zero second timer.reset(0) 
     this.reset = function(sec) 
     { 
      // sec = (typeof(sec) !== 'undefined') ? sec : 0; 
      // time = sec; 
      generateTime(time); 
     } 

     // Change the mode of the timer, count-up (1) or countdown (0) 
     this.mode = function(tmode) 
     { 
      mode = tmode; 
     } 

     // This methode return the current value of the timer 
     this.getTime = function() 
     { 
       return time; 
     } 

     // This methode return the current mode of the timer count-up (1) or countdown (0) 
     this.getMode = function() 
     { 
      return mode; 
     } 

     // This methode return the status of the timer running (1) or stoped (1) 
     this.getStatus 
     { 
      return status; 
     } 

     // This methode will render the time variable to hour:minute:second format 
     function generateTime() 
     { 


      var second = time ; 
      //var minute = Math.floor(time/60) % 60; 
      // var hour = Math.floor(time/3600) % 60; 

      second = (second < 10) ? '0'+second : second; 
      // minute = (minute < 10) ? '0'+minute : minute; 
      // hour = (hour < 10) ? '0'+hour : hour; 

      $('div.timer span.second').html(second); 
      $('div.timer1 span.second').html(second); 
      // $('div.timer span.minute').html(minute); 
      // $('div.timer span.hour').html(hour); 
     } 

    } 
    // example use 
    var timer; 

    $(document).ready(function(e) 
    { 
     timer = new _timer 
     (
      function(time) 
      { 

      } 
     ); 
     timer.reset(110); 

    }); 

    var timer1; 

    $(document).ready(function(e) 
    { 
     timer1 = new _timer 
     (
      function(time) 
      { 

      } 
     ); 
     timer1.reset(110); 

    }); 

    </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div> 

      <asp:Panel ID="Panel1" runat="server" > 

       <div class="timer"> 
       <span class="second">1111</span> 
      </div> 
      <div> 
      <script type="text/javascript"> 

      window.onload = function() { timer.start(806); }; 
     </script> 

      </div> 

       </asp:Panel> 

       <asp:Panel ID="Panel2" runat="server" > 

        <div class="timer1"> 
       <span class="second">2222</span> 
      </div> 
      <div> 

       <script type="text/javascript"> 

      window.onload = function() { timer1.start(20); }; 
     </script> 
       </div> 
       </asp:Panel> 
      <asp:Literal ID="Literal1" runat="server"></asp:Literal></div> 


     </form> 
    </body> 
    </html>

，我已經叫定時器2次不同的時間間隔，但它只是與上次間隔值運行。

來源

2013-07-30 arash rajaei

除非我失去了一些東西，它看起來像它只是因爲你在這兩個定時器，具有設置兩個值：

$('div.timer span.second').html(second); 
$('div.timer1 span.second').html(second);

而是選擇傳入構造像這樣：

function _timer(selector, callback) {

然後改變你的視覺更新：

$(selector + ' span.second').html(second);

和新你的計時器，如：

timer = new _timer 
    (
     ".timer", 
     function(time) 
     { 
...

和：

timer1 = new _timer 
    (
     ".timer1", 
     function(time) 
     { 
...

編輯：我回去看了& ......只有一個定時器實際運行的原因是因爲你使用window.onload來設置start調用，因此第二個只是取代第一個。如果不徹底改變你的代碼，最簡單的方法來解決這個特定的問題是使用jQuery附上load事件（因爲jQuery的允許添加多個事件處理程序開箱）：

$(window).load(function() { timer.start(806); });

和

$(window).load(function() { timer1.start(20); });

來源

2013-07-31 00:20:00 Alconja

感謝您的回覆，我已經做了您的建議，但它沒有工作，再次使用最後的間隔時間，只有一個計時器正在工作，第二個停止，我認爲問題是關於範圍，所以兩個計時器都使用相同值作爲區間，但我無法找到問題 –

@arashrajaei - 請參閱我上面的編輯... – Alconja

非常感謝，這是偉大的.... –

在javascript中顯示幾個計時器

回答

相關問題