将 mm:ss 中的秒转换为运行 JavaScript 计时器

Question

我只是想更新一个朋友的计时器，我们不久前为一个活动做了这个。计时器工作完美并且已经完成了它应该做的一切（参见运行片段）。但是，现在我想显示格式 mm:ss 而不是仅显示秒数（例如 180 -> 3:00）。这当然必须能够进一步倒计时。我用谷歌搜索的不同方法都失败了。有谁知道如何优雅地解决我的问题？

编辑：您可以通过按 'Space'

来启动和停止计时器

<!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>

Answer 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）

<!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>

很酷的动画顺便说一句。

Answer 2

使用模数数学：

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>

将 mm:ss 中的秒转换为运行 JavaScript 计时器

Converting seconds in mm:ss in running JavaScript Timer

javascript

jquery

time

timer

countdown

将 mm:ss 中的秒转换为 运行 JavaScript 计时器

Converting seconds in mm:ss in running JavaScript Timer

javascript

jquery

time

timer

countdown

将 mm:ss 中的秒转换为运行 JavaScript 计时器