在运行JavaScript计时器中以mm：ss为单位转换秒

Question

I'm just trying to update a friend's timer, which we did for an event a while ago. 我只是在尝试更新朋友的计时器，这是我们前一段时间为某个事件所做的。 The timer works perfectly and already does everything it should (see and run Snippet). 计时器可以完美运行，并且已经完成了它应该做的所有事情（请参阅并运行Snippet）。 However, now I would like to display the format mm:ss instead of only seconds (eg. 180 -> 3:00). 但是，现在我想显示格式mm：ss而不是仅显示秒（例如180-> 3:00）。 This must of course be able to count down further. 当然，这必须能够进一步倒计时。 Different approaches I googled have failed. 我用谷歌搜索的不同方法都失败了。 Has anyone an idea how to solve my problem elegantly? 有谁知道如何优雅地解决我的问题？

Edit: You can start and stop the timer by pressing 'Space' 编辑：您可以通过按'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

Here is the important part: 这是重要的部分：

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

Basically split up each part by minutes and seconds and concatenate them. 基本上将每个部分按分钟和几秒分割，然后将它们连接起来。 The substring is to enforce double digit padding (ie: 02:03 instead of 2:3) 子字符串用于强制两位数填充（即：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>

Cool animation btw. 酷动画顺便说一句。

Answer 2

Use modulus math: 使用模数数学：

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

Full working example: 完整的工作示例：

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

在运行JavaScript计时器中以mm：ss为单位转换秒

问题描述

2 个解决方案

解决方案1
1 2017-03-31 19:55:11

解决方案2
1 已采纳 2017-03-31 19:56:11

在运行JavaScript计时器中以mm：ss为单位转换秒

问题描述

2 个解决方案

解决方案1 1 2017-03-31 19:55:11

解决方案2 1 已采纳 2017-03-31 19:56:11

解决方案1
1 2017-03-31 19:55:11

解决方案2
1 已采纳 2017-03-31 19:56:11