在運行JavaScript計時器中以mm：ss為單位轉換秒
[英]Converting seconds in mm:ss in running JavaScript Timer
問題描述
我只是在嘗試更新朋友的計時器，這是我們前一段時間為某個事件所做的。 計時器可以完美運行，並且已經完成了它應該做的所有事情（請參閱並運行Snippet）。 但是，現在我想顯示格式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>
2 個解決方案
解決方案1
1 2017-03-31 19:55:11
這是重要的部分：
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>
酷動畫順便說一句。
解決方案2
1 已采納 2017-03-31 19:56:11
使用模數數學：
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>
自動將用戶輸入的秒數轉換為 HH:MM:SS 倒數計時器
[英]Automatically Convert User Inputted Seconds To HH:MM:SS Countdown Timer
將秒轉換為 dd:hh:mm:ss 或 Days Hours Mins Secs
[英]converting seconds to dd:hh:mm:ss or Days Hours Mins Secs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
將秒轉換為HH：mm：ss？
使用 JavaScript 將秒數轉換為 HH-MM-SS？
JavaScript倒計時，將秒格式設置為HH：MM：SS
計時器 (HH:MM:SS) 帶有用於在線任務的 javascript
自動將用戶輸入的秒數轉換為 HH:MM:SS 倒數計時器
使用 Javascript 將小時轉換為 HH:MM:SS
將UNIX轉換為HH-MM-SS Javascript
將秒轉換為 dd:hh:mm:ss 或 Days Hours Mins Secs
僅在javascript中將HH：MM：SS字符串轉換為秒
如何在javascript中將負秒數轉換為hh:mm:ss
相關標簽