Question

我从简单或简单的脚本创建多个计时器倒计时。 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到它.. 当我添加更多的计时器倒计时.. 脚本自动或动态地执行它，而不必添加一堆代码.. 并且代码变得清晰和高效。

先谢谢

Answer 1

使用像这样的单个计时器可能更有效...

<!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-属性来跟踪每个计时器剩余的秒数以及计时器是否已过期。这样，我可以添加尽可能多的计时器，因为有关计时器的所有必要元数据都在计时器本身。

在每个刻度线上，我将浏览每个现有的计时器，检查其数据剩余属性并相应地更新计时器div。如果它过期，那么做你的动画。完成所有计时器后，清理间隔。

试一试......

问题重新分解多个计时器倒计时

1 个答案: