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

最新推荐文章于 2024-06-19 10:00:00 发布

zbwroom

最新推荐文章于 2024-06-19 10:00:00 发布

阅读量5.4k

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/zbwroom/article/details/77662686

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先我们先来看看效果（图片自理）
这里写图片描述

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

zbwroom

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
原生JavaScript利用setInterval的一个简单开始暂停的定时器

首先我们先来看看效果（图片自理）下面看一下DOM<body> <table> <tr> <td> <img src="number/0.bmp" id="imgLeft"> </td> <td> <img src="number/0.bm
复制链接

扫一扫