利用JavaScript（JS）實現一個可輸入分鍾的倒計時鍾功能
本文章為 Tz張無忌 原創文章，轉載請注明來源，謝謝合作！
網絡各種利用JavaScript做倒計時的Demo對新手很不友好，這里我親手只做了一個案例，希望能幫助到讀者們。
本Demo實現了輸入數字可以開啟倒計時功能，可以隨時暫停、重置倒計時，並且對輸入非數字類型其他字符進行了過濾以及提示！
整體思路：
1.利用JS獲取一次當前時間，把用戶在input輸入框的內容，轉化為我們所需要的數字
2.然后利用JavaScript的時間戳`get.Time()`,把用戶輸入的數據+我們第一次獲取的時間，然后減去我的第二次獲得的時間戳（不斷刷新的時間戳），就可以得到我們所需要的倒計時秒數。
3.將我們所需要的信息輸出
##效果圖如下：
##Demo的代碼如下：
詳細信息請看Demo中注釋，♥本Demo中加入了隱藏小彩蛋♥，如有疑問，可以在評論處留言，會在第一時間進行回復。
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>專業的在線倒計時</title>
<style>
/*以下為CSS樣式設置*/
/*為了代碼簡潔使用通配符，實際開發不建議使用*/
*{
margin: 0;
padding: 0;
}
body {
background-image:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
.ofixed{
position: fixed;
width: 30px;
height: 30px;
background-color: #00ff0f;
top: 30%;
opacity: 0.1;
border-radius: 14px;
text-align: center;
line-height: 30px;
transition: 1s;
font-size: 12px;
}
.ofixed div{
display: none;
}
.ofixed:hover{
opacity: 0.8;
width: 180px;
}
.ofixed:hover div{
display: block;
}
.content {
width: 450px;
height: 100px;
margin: 40px auto 0;
display: flex;
justify-content: space-between;
}
.button_content {
width: 450px;
height: 100px;
margin: 10px auto;
display: flex;
justify-content: space-between;
}
input{
width: 80px;
height: 60px;
/*border:1px solid blue;*/
border-radius: 5px;
border:none;
opacity: 0.7;
font-size: 30px;
color: deepskyblue;
text-align: center;
}
button {
width: 100px;
height: 40px;
font-size: 20px;
font-weight: bold;
color: #4caf50;
border: none;
border-radius: 6px;
position: relative;
}
button div{
position: absolute;
top: 0;
font: 0;
width: 0px;
height: 40px;
background-color:#2b74e2;
transition: 0.4s;
opacity: 0.5;
}
button:hover div{
width: 100px;
}
span {
font-size: 40px;
position: relative;
top: 3px;
}
#d1 {
width: 900px;
height: 300px;
background-color: blueviolet;
border-radius: 20px;
/*text-align: center;*/
font-weight: bold;
font-size: 80px;
line-height: 300px;
color:black;
margin: 0 auto ;
text-align: center;
}
#btn3 {
color: black;
}
</style>
</head>
<body>
<div class="ofixed">
<div>這是一個隱藏的彩蛋</div>
</div>
<div class="content">
<input type="text" id="newhours" maxlength="2">
<span>時</span>
<input type="text" id="newminutes" maxlength="2">
<span>分</span>
<input type="text" id="newseconds" maxlength="2">
<span>秒</span>
</div>
<div class="button_content">
<button id="btn1">開 始<div></div></button>
<button id="btn2">暫 停<div></div></button>
<button id="btn3">重 置<div></div></button>
</div>
<div id="d1">
</div>
</body>
<script>
// 獲取一次當前系統時間
var current_time =new Date();
function fn1(){
// 首先獲取input輸入框的的內容
var ohours = document.getElementById("newhours").value;
var ominutes = document.getElementById("newminutes").value;
var oseconds = document.getElementById("newseconds").value;
// input輸入的內容是字符串，把它們相加成時間總的秒數
// 把小時轉換成相應的毫秒數
var ohours_milli = ohours*60*60*1000;
// 把輸入的分鍾轉換成相應的毫秒數
var ominutes_millo = ominutes*60*1000;
// 把輸入的轉換成相應的毫秒數
var oseconds_milli = oseconds*1000
// 累計相加得出用戶輸入的所有毫秒數
var add_time = ohours_milli+ominutes_millo+oseconds_milli;
// 通過計時器循環獲得新的系統時間
var reset_time = new Date();
// current_time獲取的系統時間加上用戶輸入的時間 減去當前系統時間，得到倒計時的效果
var time = current_time.getTime() + add_time - reset_time.getTime();
console.log(time)
// 通過上面time獲取的倒計時毫秒數，分別除以相對數字得到，分、秒以及毫秒
var hours =Math.floor(time/1000/60/60%24);
var minute =Math.floor(time/1000/60%60);
var seconds = Math.floor(time/1000%60 );
var milliseconds = Math.floor( time % 60);
// 獲取頁面DIv
var odiv = document.getElementById("d1");
// 小於10在前面加0
if(milliseconds<10){
milliseconds = "0" + milliseconds;
}
if(seconds<10){
seconds = "0" + seconds;
}
if(minute<10){
minute = "0" + minute;
}
if(hours<10){
hours = "0" + hours;
}
// 將得到結果輸入至頁面
odiv.innerHTML = (hours + " : " + minute +" : " +seconds + " : " +milliseconds);
// 一些判斷條件
// 輸入的小時不能大於24小時，24小時等於86400000毫秒
if(time > 86400000){
odiv.innerHTML = ("♥最大小時數為24");
odiv.style.color = "#ffeb3b";
clearInterval(set_reset);
}
// 當倒計時為0的時候停止計時器
if( time < 0){
odiv.innerHTML = ("♥倒計時結束♥");
odiv.style.color = "red";
clearInterval(set_reset);
}
// 輸入非數字提示
if(isNaN(time)){
odiv.innerHTML = ("♥請輸入正確的數字");
odiv.style.color = "#ffeb3b";
clearInterval(set_reset);
}
// 未輸入時間提示
if(ohours==""&& ominutes==""&&oseconds==""){
odiv.innerHTML = ("♥請輸入時間,重置再試");
obtn1.innerHTML = "未輸時間";
obtn2.innerHTML = "未輸時間";
obtn1.disabled =true;
obtn2.disabled =true;
odiv.style.color = "#ffeb3b";
clearInterval(set_reset);
}
}
// 獲取按鈕
var obtn1 = document.getElementById("btn1");
var obtn2 = document.getElementById("btn2");
var obtn3 = document.getElementById("btn3");
// 鼠標點擊執行
obtn1.onclick = function () {
obtn1.innerHTML = "正在執行";
obtn2.innerHTML = "點擊暫停";
set_reset = setInterval("fn1()",100 );
console.log(setInterval);
// 讓input的變為只讀
document.getElementById("newhours").disabled="turn";
document.getElementById("newminutes").disabled="turn";
document.getElementById("newseconds").disabled="turn";
}
obtn2.onclick = function () {
clearInterval(set_reset);
obtn1.innerHTML = "點擊繼續";
obtn2.innerHTML = "已 暫 停"
}
obtn3.onclick = function () {
// 重新加載當前頁面
location.reload()
}
</script>
</html>
如有疑問，可以在評論處留言，會在第一時間進行回復。筆芯~