原生JavaScript利用setInterval的一個簡單開始暫停的定時器
阿新 • • 發佈:2019-02-02
首先我們先來看看效果(圖片自理)
下面看一下DOM
<body>
<table>
<tr>
<td>
<img src="number/0.bmp" id="imgLeft">
</td>
<td>
<img src="number/0.bmp" id="imgRight">
</td>
</tr >
<tr>
<td>
<input type="button" value="開始" id="start" onclick="doStart()">
</td>
<td>
<input type="button" value="停止" id="stop" onclick="doStop()" disabled>
</td>
</tr >
</table>
</body>
然後就是js程式碼,並沒有style樣式
<script type="text/javascript">
var timer;
var r=0;
var l=0;
function doStart(){
$("start").disabled=true;
$("stop").disabled=false;
timer=setInterval(go,100);
}
function go(){
r++;
if(r>9){
r=0;
l++;
}
if(l>9){
l=0;
}
$("imgRight").src="number/"+r+".bmp";
$("imgLeft").src="number/"+l+".bmp";
}
function doStop(){
$("start").disabled=false;
$("stop").disabled=true;
clearInterval(timer);
}
function $(id){
return document.getElementById(id);
}
</script>