我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 什麼是CORS CORS（跨域資源共用）是一種基於HTTP頭的機制，可以放寬瀏覽器的同源策略，實現不同功能變數名稱網站之間的通信。 前置知識 同源定義：協議、域 ...
一、解構
如圖所示，手機瀏覽器的效果。代碼就是簡單的html語言加上一個JavaScript腳本，界面主要分3部分，功能實現主要分3個函數。
（一）顯示樣式
在頭裡定義了居中顯示的CSS樣式，將來在瀏覽器中居中顯示倒計時X分XX秒。
<style type="text/css">
.center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
另外網頁背景主體是藍色。
<body bgcolor="blue"/>
（二）輸入框和按鈕
<input type="text" value="" id="time">
<input type="button" onclick="go()" value="開始">
<input type="button" onclick="stop()" value="停止">
（三）倒計時顯示
倒計時timer顯示區域，用到了居中顯示的CSS樣式，同時設置了前景色為白色，字居中，字體大小180px：
<div id="timer" class=center style="color:#fff; text-align:center; font-size:180px;"/>
（四）三個函數
go函數:
//解析時間
function go() {
clearInterval(timer);//清除定時器
document.getElementById("timer").style.color="#fff";//設置timer顯示區域前景色為白色
time = document.getElementById("time").value;//獲取起始時間
resetTime(time);//用time複位倒計時
}
reset函數:
function resetTime(time) {
var t = parseInt(time) * 60; //將分鐘換算成秒
var m, s; //分鐘和秒
function countDown() { //遞減函數
t--; //時間減1
if (t < 0) { //邊界值檢測，若t為零，就停止計時
t = 0;
stop();
}
m = Math.floor(t / 60); //取整分鐘
s = t % 60; //取秒
s < 10 && (s = '0' + s); //秒值補齊0位
document.getElementById("timer").innerHTML = m + "分" + s + "秒"; //輸出倒計時顯示
} //end of countDown
timer = setInterval(countDown,1000); //設置計時器，每1000毫秒調用一次countDown遞減函數
} //end of resetTime
stop函數:
function stop() {
clearInterval(timer); //停止計時
document.getElementById("timer").style.color="#f00"; //設置timer工區域前景色為RGB顏色紅色
}
二、樣例
<!--(c)hele 2018倒計時程式，輸入分鐘數點擊開始，內置遞減程式，1秒遞減1次-->
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
// width:1000px;
}
</style>
</head>
<body bgcolor="blue">
<input type="text" value="" id="time">
<input type="button" onclick="go()" value="開始">
<input type="button" onclick="stop()" value="停止">
<div id="timer" class=center style="color:#fff; text-align:center; font-size:180px;">
</div>
<script type="text/javascript">
var timer = null;
//解析時間
function go() {
clearInterval(timer);
document.getElementById("timer").style.color="#fff";
time = document.getElementById("time").value;
resetTime(time);
}
function stop() {
clearInterval(timer);
document.getElementById("timer").style.color="#f00";
}
//設置倒計時器參數
function resetTime(time) {
var t = parseInt(time) * 60;
var m, s;
function countDown() {
t--;
if (t < 0) {
t = 0;
stop();
}
m = Math.floor(t / 60);
s = t % 60;
s < 10 && (s = '0' + s);
document.getElementById("timer").innerHTML = m + "分" + s + "秒";
} //end of countDown
timer = setInterval(countDown,1000);
} //end of resetTime
</script>
</body>
</html>
