主要就是利用js來實現的業務邏輯,實現結果javascript
代碼:html
<!DOCTYPE html> <!-- <html lang="en"> --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> .start{ color: red; font-size: 16px; margin: 10px 0 0; } .totalTime{ width: 30px; } </style> </head> <body> <div> 請輸入倒計多長時間: <input type="text" id="totalTime" class="totalTime">分鐘 <!-- <input type="button" id="start" value="開始倒計時"> --> <div id="start1" class="start">開始倒計時</div> <hr> 副本倒計多長時間: <input type="text" id="totalTime1" class="totalTime">分鐘 <!-- <input type="button" id="start" value="開始倒計時"> --> <div id="start2" class="start">開始倒計時</div> <hr> 副本倒計多長時間: <input type="text" id="totalTime3" class="totalTime">分鐘 <!-- <input type="button" id="start" value="開始倒計時"> --> <div id="start3" class="start">開始倒計時</div> </div> <script type="text/javascript"> window.onload = function () { // 第三個 var odiv3 = document.getElementById("start3"); var totalTime3 = 0; var time3 = 0; document.getElementById("start3").onclick = function () { clearInterval(time3) var number = parseInt($("#totalTime3").val() * 60 ) totaltime3 = number start3();//調用函數 var time = setInterval(start3, 1000);//設置定時器 每一秒執行一次 time3 = time console.log(time) } function start3() { totaltime3-- var hour = totwo(parseInt(totaltime3 / 3600)); // 取餘/60/60獲取時(取餘是獲取conS對應位置的小數位) var min = totwo(parseInt(totaltime3 % 3600 / 60));// 取餘/60獲取分 var s = totwo(parseInt(totaltime3 % 60)); //取總秒數的餘數 var html = hour + "時" + min + "分" + s + "秒"; odiv3.innerHTML = html;//把字符串添加進div中 if (totaltime3 < 0) {//倒計時完成 執行功能,這裏是播放MP3 alert("時間到。。。。。") clearInterval(time3);//執行功能時要清除時間函數 } } // 第二個 var odiv2 = document.getElementById("start2"); var totalTime2 = 0; var time2 = 0; document.getElementById("start2").onclick = function () { clearInterval(time2) var number = parseInt($("#totalTime1").val() * 60 ) totaltime2 = number start2();//調用函數 var time = setInterval(start2, 1000);//設置定時器 每一秒執行一次 time2 = time console.log(time) } function start2() { totaltime2-- var hour = totwo(parseInt(totaltime2 / 3600)); // 取餘/60/60獲取時(取餘是獲取conS對應位置的小數位) var min = totwo(parseInt(totaltime2 % 3600 / 60));// 取餘/60獲取分 var s = totwo(parseInt(totaltime2 % 60)); //取總秒數的餘數 var html = hour + "時" + min + "分" + s + "秒"; odiv2.innerHTML = html;//把字符串添加進div中 if (totaltime2 < 0) {//倒計時完成 執行功能,這裏是播放MP3 alert("時間到。。。。。") clearInterval(time2);//執行功能時要清除時間函數 } } // 第一個 var odiv = document.getElementById("start1"); var totalTime = 0; var time1 = 0; function totwo(e) { return e < 10 ? "0" + e : "" + e;//若是取得的數字爲個數則在其前面增添一個0 } document.getElementById("start1").onclick = function () { clearInterval(time1) var number = parseInt($("#totalTime").val() * 60 ) totaltime = number start1();//調用函數 var time = setInterval(start1, 1000);//設置定時器 每一秒執行一次 time1 = time console.log(time) } function start1() { totaltime-- var hour = totwo(parseInt(totaltime / 3600)); // 取餘/60/60獲取時(取餘是獲取conS對應位置的小數位) var min = totwo(parseInt(totaltime % 3600 / 60));// 取餘/60獲取分 var s = totwo(parseInt(totaltime % 60)); //取總秒數的餘數 var html = hour + "時" + min + "分" + s + "秒"; odiv.innerHTML = html;//把字符串添加進div中 if (totaltime < 0) {//倒計時完成 執行功能,這裏是播放MP3 alert("時間到。。。。。") clearInterval(time1);//執行功能時要清除時間函數 } } } </script> </body> </html>