原生JavaScript利用setInterval的一个简单开始暂停的定时器

首先我们先来看看效果（图片自理）

下面看一下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>

更多相关文章

随机推荐