在运行JavaScript计时器

时间：2017-03-31 19:44:02

标签： javascript jquery time timer countdown

我只是想更新一个朋友的计时器，我们之前为一个事件做了这个计时器。计时器工作得很好，已经完成了应有的一切（查看并运行Snippet）。但是，现在我想显示格式mm：ss而不是秒（例如180 - > 3:00）。这当然必须能够进一步倒计时。我用Google搜索的不同方法都失败了。有谁知道如何优雅地解决我的问题？

编辑：您可以按＆＃39; Space＆＃39;

启动和停止计时器

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title></title>

  <style type="text/css">
    body {
      background-color: #333;
      font-family: sans-serif;
    }
    
    .item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(3.0);
    }
    
    .item h1 {
      text-align: center;
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-110%);
      color: #ffffff;
      font-size: 3em;
    }
    
    .item h2 {
      text-align: center;
      position: absolute;
      width: 50%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-110%);
      color: #ffffff;
      font-size: 1.5em;
      line-height: 0.9;
    }
    
    svg {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    
    .circle_animation {
      stroke-dasharray: 440;
      /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 440;
      transition: all 1s linear;
    }
  </style>

  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

  <script type="text/javascript">
    var running = false;

    var time = 180;
    var initialOffset = '440';
    var runtime = 0;

    $(document).keydown(function(e) {

      switch (e.which) {
        case 32:
          setTimeout(function() {
            if (running === false) {
              running = true;
            } else {
              running = false;
            };
          }, 1);
          break;
      }
    });

    $(document).ready(function() {

      console.log("ready!");
      $('#start').click(function() {
        running = true;
      });

      var interval = setInterval(function() {
        $('.circle_animation').css('stroke-dashoffset', initialOffset - (runtime * (initialOffset / (time + 10.5))));
        $('h1').text(time - runtime);
        if (runtime == 420) {
          audioElement1.play();
        }
        if (runtime == time) {
          clearInterval(interval);
          $('.circle_animation').css('stroke-dashoffset', 880);
          $('h1').text('');
          $('h2').text('Time is up!');
        }
        if (running) {
          runtime++;
        };
      }, 1000);

    });
  </script>

</head>

<body>

  <div class="item html">
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
      <g>
        <title>Layer 1</title>
        <circle id="circle" r="65.85699" cy="81" cx="81" stroke-width="15" stroke="#ffffff" fill="none"/>
        <circle id="circle" class="circle_animation" r="65.85699" cy="81" cx="81" stroke-width="16" stroke="#333" fill="none"/>
      </g>
    </svg>
    <h1>180</h1>
    <h2></h2>
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

这是重要的部分：

 var seconds = time - runtime,
      mins = ("0" + Math.floor(seconds / 60)).substr(-2),
      secs = ("0" + (seconds % 60)).substr(-2);
    $('h1').text(mins + ":" + secs);

基本上将每个部分按分钟和秒分开并连接它们。子字符串是强制执行双位数填充（即：02：03而不是2：3）

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title></title>

  <style type="text/css">
    body {
      background-color: #333;
      font-family: sans-serif;
    }
    
    .item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(3.0);
    }
    
    .item h1 {
      text-align: center;
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-110%);
      color: #ffffff;
      font-size: 3em;
    }
    
    .item h2 {
      text-align: center;
      position: absolute;
      width: 50%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-110%);
      color: #ffffff;
      font-size: 1.5em;
      line-height: 0.9;
    }
    
    svg {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    
    .circle_animation {
      stroke-dasharray: 440;
      /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 440;
      transition: all 1s linear;
    }
  </style>

  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

  <script type="text/javascript">
    var running = false;

    var time = 180;
    var initialOffset = '440';
    var runtime = 0;

    $(document).keydown(function(e) {

      switch (e.which) {
        case 32:
          setTimeout(function() {
            if (running === false) {
              running = true;
            } else {
              running = false;
            };
          }, 1);
          break;
      }
    });

    $(document).ready(function() {

      console.log("ready!");
      $('#start').click(function() {
        running = true;
      });

      var interval = setInterval(function() {
        $('.circle_animation').css('stroke-dashoffset', initialOffset - (runtime * (initialOffset / (time + 10.5))));
        var seconds = time - runtime,
          mins = ("0" + Math.floor(seconds / 60)).substr(-2),
          secs = ("0" + (seconds % 60)).substr(-2);
        $('h1').text(mins + ":" + secs);
        if (runtime == 420) {
          audioElement1.play();
        }
        if (runtime == time) {
          clearInterval(interval);
          $('.circle_animation').css('stroke-dashoffset', 880);
          $('h1').text('');
          $('h2').text('Time is up!');
        }
        if (running) {
          runtime++;
        };
      }, 1000);

    });
  </script>

</head>

<body>

  <div class="item html">
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
      <g>
        <title>Layer 1</title>
        <circle id="circle" r="65.85699" cy="81" cx="81" stroke-width="15" stroke="#ffffff" fill="none"/>
        <circle id="circle" class="circle_animation" r="65.85699" cy="81" cx="81" stroke-width="16" stroke="#333" fill="none"/>
      </g>
    </svg>
    <h1>180</h1>
    <h2></h2>
  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

酷动画btw。

答案 1 :(得分：1)

使用模数数学：

function sec2human(seconds) {
    sec = seconds % 60;
    min = parseInt(seconds / 60);
    if(sec.toString().length == 1) { // padding
        sec = "0" + sec;
    }
    return min + ":" + sec;
}

完整的工作示例：

<!DOCTYPE html>
<html>

<head>
  <title></title>

  <style type="text/css">
    body {
      background-color: #333;
      font-family: sans-serif;
    }

    .item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(3.0);
    }

    .item h1 {
      text-align: center;
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-110%);
      color: #ffffff;
      font-size: 3em;
    }

    .item h2 {
      text-align: center;
      position: absolute;
      width: 50%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-110%);
      color: #ffffff;
      font-size: 1.5em;
      line-height: 0.9;
    }

    svg {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }

    .circle_animation {
      stroke-dasharray: 440;
      /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 440;
      transition: all 1s linear;
    }
  </style>

  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

  <script type="text/javascript">
    var running = false;

    var time = 180;
    var initialOffset = '440';
    var runtime = 0;

    $(document).keydown(function(e) {

      switch (e.which) {
        case 32:
          setTimeout(function() {
            if (running === false) {
              running = true;
            } else {
              running = false;
            };
          }, 1);
          break;
      }
    });

    $(document).ready(function() {

      console.log("ready!");
      $('#start').click(function() {
        running = true;
      });

      $('h1').text(sec2human(time)); // added for initial display

      var interval = setInterval(function() {
        $('.circle_animation').css('stroke-dashoffset', initialOffset - (runtime * (initialOffset / (time + 10.5))));
        $('h1').text(sec2human(time - runtime)); // added function call
        if (runtime == 420) {
          audioElement1.play();
        }
        if (runtime == time) {
          clearInterval(interval);
          $('.circle_animation').css('stroke-dashoffset', 880);
          $('h1').text('');
          $('h2').text('Time is up!');
        }
        if (running) {
          runtime++;
        };
      }, 1000);

    });

    function sec2human(seconds) {
        sec = seconds % 60;
        min = parseInt(seconds / 60);
        if(sec.toString().length == 1) { // padding
            sec = "0" + sec;
        }
        return min + ":" + sec;
    }
  </script>

</head>

<body>

  <div class="item html">
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
      <g>
        <title>Layer 1</title>
        <circle id="circle" r="65.85699" cy="81" cx="81" stroke-width="15" stroke="#ffffff" fill="none"/>
        <circle id="circle" class="circle_animation" r="65.85699" cy="81" cx="81" stroke-width="16" stroke="#333" fill="none"/>
      </g>
    </svg>
    <h1>180</h1>
    <h2></h2>
  </div>

</body>

</html>

相关问题
最新问题