JS之簡單計時器及setInterval()用法
setInterval基本用法
time = setInterval(function(
alert("每兩秒彈出一次");
), 2000);
clearInterval(time);//關閉
簡單計時器
要求：
按鈕1(開始、暫停、繼續)：
開始按鈕：開始計時，按鈕變爲“暫停”；
暫停按鈕：暫停計時，按鈕變爲“繼續”；
繼續按鈕：繼續剛纔計時，按鈕變爲“暫停”；
按鈕2：
重置：所有內容清空；
html代碼：
<body>
<input type="text" id="hours" value="" />:
<input type="text" id="minute" value="" />:
<input type="text" id="second" value="" /><br />
<button id="btn1">開始</button>
<button id="btn2">重置</button>
</body>
JavaScript代碼：
<script type="text/javascript">
onload = function(){
var hour = 0;
var minute = 0;
var second = 0;
var hours = document.getElementById("hours");
var minutes = document.getElementById("minute");
var seconds = document.getElementById("second");
var start = document.getElementById("btn1");
var stop = document.getElementById("btn2");
start.onclick = function(){
alert(start.innerHTML);
if (start.innerHTML == "開始") {
start.innerHTML = "暫停";
time = setInterval(function(){
second++;
if (second >= 60) {
second = 0;
minute +=1;
}
if (minute >= 60) {
minute = 0;
hour += 1;
}
seconds.value = second;
minutes.value = minute;
hours.value = hour;
},200);
} else if(start.innerHTML == "暫停"){
start.innerHTML = "繼續";
clearInterval(time);
} else if(start.innerHTML == "繼續"){
start.innerHTML = "暫停";
time = setInterval(function(){
second++;
if (second >= 60) {
second = 0;
minute +=1;
}
if (minute >= 60) {
minute = 0;
hour += 1;
}
seconds.value = second;
minutes.value = minute;
hours.value = hour;
},200);
}
}
stop.onclick = function(){
clearInterval(time);
second = 0;
minute = 0;
hour = 0;
seconds.value = "";
minutes.value = "";
hours.value = "";
start.innerHTML = "開始";
}
}
</script>