問題重新分解多個定時器倒計時

我從簡單或簡單的腳本創建我的多個定時器倒計時。 entire code 問題重新分解多個定時器倒計時

問題的發生當我要添加定時器倒計時，我再次

必須聲明變量current_total_second

CODE：

elapsed_seconds= tampilkan("#time1");

和可變計時器誰在使用setInterval設置..

timer= setInterval(function() { 
    if (elapsed_seconds != 0){ 
     elapsed_seconds = elapsed_seconds - 1; 
     $('#time1').text(get_elapsed_time_string(elapsed_seconds)) 
    }else{ 
     $('#time1').parent().slideUp('slow', function(){ 
      $(this).find('.post').text("Post has been deleted"); 
     }) 
     $('#time1').parent().slideDown('slow'); 
     clearInterval(timer); 
    } 
}, 1000);

我已經知道重新分解，並嘗試不同的方式但我疊這個代碼我想實現flexibelity它.. 當我定時器倒計時的添加更多的再保.. 腳本做自動或動態沒有我必須添加一堆代碼.. 和代碼變得清晰和更高效。

由於提前

來源

2011-01-13 Joko Wandiro

這也可能是更有效的使用，像這樣一個計時器...

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    <style type="text/css"> 
    body { 
     padding: 10%; 
     } 

     hr { 
     margin: 0px; 
     padding: 0px; 
     height: 6px; 
     background: black; 
     } 

     .clock { 
      margin: 0px; 
      padding: 8px 8px; 
      background-color: whitesmoke; 
      color: red;  
     } 

     .post { 
      margin: 0px; 
      padding: 8px 8px; 
      background: white; 
      /*border-bottom: 4px solid black;*/ 
     } 
    </style> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    </head> 
    <body> 
    <a class="addTimer">Add Timer</a> | Timer count: <span class="timerCount">0</span><span class="info"></span> 
    <div class="container"> 
    </div>  
    </body> 

    <script type="text/javascript"> 
    function get_elapsed_time_string(total_seconds) { 
     function pretty_time_string(num) { 
     return (num < 10 ? "0" : "") + num; 
     } 

      var hours = Math.floor(total_seconds/3600); 
      total_seconds = total_seconds % 3600; 

      var minutes = Math.floor(total_seconds/60); 
      total_seconds = total_seconds % 60; 

      var seconds = Math.floor(total_seconds); 

      hours = pretty_time_string(hours); 
      minutes = pretty_time_string(minutes); 
      seconds = pretty_time_string(seconds); 

      var currentTimeString = hours + ":" + minutes + ":" + seconds;   
      return currentTimeString; 
    } 

    $(function() { 
     var timer = null; 
     var timerCount = 0; 

     $(".addTimer").click(function(e) { 
     $("<hr /><div class=\"timer\" data-remaining=\"10\" data-expired=\"0\"><div class=\"clock\">00:00:10</div><div class=\"post\">Lorem Ipsum</div></div>").appendTo($(".container")); 

     timerCount++; 
     $(".timerCount").text(timerCount); 

     if (timer === null) { 
      $(".info").text(" | ticker created"); 
      timer = setInterval(function() { 
      $(".container > .timer").each(function() { 
       var remainingSeconds = parseInt($(this).attr("data-remaining"), 10); 
       if (remainingSeconds > 1) { 
       remainingSeconds--; 
       $(this).attr("data-remaining", remainingSeconds); 
       $(this).find(".clock").text(get_elapsed_time_string(remainingSeconds)); 
       } else { 
       if ($(this).attr("data-expired") === "0") { 
        remainingSeconds--; 
        $(this).attr("data-remaining", remainingSeconds); 
        $(this).find(".clock").text(get_elapsed_time_string(remainingSeconds)); 
        $(this).slideUp("slow", function() { 
        $(this).find(".post").text("Post has been deleted"); 
        $(this).slideDown("slow"); 
        $(this).attr("data-expired", "1"); 

        timerCount--; 
        $(".timerCount").text(timerCount); 

        if (timerCount === 0) { 
         $(".info").text(" | ticker destroyed"); 
         clearInterval(timer); 
         timer = null; 
        } 
        }); 
       } 
       } 
      }); 
      }, 1000); 
     } else { 
      $(".info").text(" | using existing ticker"); 
     } 
     }); 


    }); 
    </script> 
</html>

在這段代碼中，我只有1只股票在任何時間（僅1 setInterval的）運行，使用data-attribute跟蹤每個定時器剩餘的秒數以及定時器是否已經過期。以這種方式，我可以添加儘可能多的定時器，因爲所有關於定時器的必要元數據都在定時器中。

在每次打勾時，我都會通過每個現有計時器，檢查其數據剩餘屬性並相應地更新計時器div。如果它過期，那麼做你的動畫。當所有的定時器完成後，清理間隔。

試試看吧...這裏

來源

2011-01-13 03:53:40

活生生的例子：http://jsfiddle.net/jchandra/ZguX8/ – 2011-01-13 03:56:44

問題重新分解多個定時器倒計時

回答

相關問題