web.js.自动播放选项卡，与解决物体速度在多次点击时间后会加速

本文链接：https://blog.csdn.net/qq_38300174/article/details/71156648

首先先看代码

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #div2{
                width: 200px;
                height: 200px;
                background: gray;
            }
            .cla{
                background: orange;
            }
        </style>
                <script type="text/javascript">         
            var arr=["yinshuo","尹","烁","大尹烁"];//定义一个循环的数组
            var timer=null; //定时器
            var i=0;        //主要用在鼠标移入已出    
            function tick(){//tick函数+定时器 实现轮播效果
                var odiv1=document.getElementById('div1');
                var odiv2=document.getElementById('div2');
                var ipts=odiv1.getElementsByTagName('input');

                    for(var j=0;j<ipts.length;j++){  //首先清除其他效果
                        ipts[j].className='';
                    }           
                    ipts[i].className='cla';                
                    odiv2.innerHTML=arr[i];
                    i++;
                        if(i==ipts.length){
                            i=0;
                        }
                }
            window.onload=function(){
            var odiv1=document.getElementById('div1');
            var odiv2=document.getElementById('div2');
            var ipts=odiv1.getElementsByTagName('input');
            for (var i=0;i<ipts.length;i++){//实现鼠标移入移出
                ipts[i].cnt=i;//看看cnt在后面哪里出现，cnt是自己定义的一个计数  
                ipts[i].onmouseover=function(){
                    clearInterval(timer);
                    for(var j=0;j<ipts.length;j++){
                        ipts[j].className='';
                    }
                    this.className='cla';
                    odiv2.innerHTML=arr[this.cnt]
                }
                ipts[i].onmouseout=function(){
                    timer=setInterval(tick,2000);
                }
            }
            clearInterval(timer);//在调用定时器前先把其关掉，保证每次只用一个定时器开着，不然实现会出问题，我会在后面给出一个代码，具体解释此效果
            timer=setInterval(tick,2000);
            tick();   //一定要加上，不然重新刷新时会有延迟

            }
        </script>
    </head>
    <body>
        <div id="div1">
        <input type="button" name="btn1" id="btn1" value="按钮"  class="cla"/>
        <input type="button" name="btn1" id="btn2" value="按钮" />
        <input type="button" name="btn1" id="btn3" value="按钮" />
        <input type="button" name="btn1" id="btn4" value="按钮" />
        </div>
        <div id="div2">

        </div>
    </body>
</html>

追加个代码，解释在执行一个定时器之前加上clearInterval(timer);（timer是对定时器起的名字）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #adiv{
                height: 100px;
                width: 100px;
                background: red;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            window.onload=function (){

                var ospd=document.getElementById('spd');
                var odiv=document.getElementById('adiv');
                var oid=document.getElementById('aid');
                var start_1=document.getElementById('start');
                var clr;
                var speed=0;
                function Move(){
                        speed=parseInt(ospd.value); 
                        if(odiv.offsetLeft>=500){                                           
                        clearInterval(clr); 
                        }
                        else{
                            odiv.style.left=odiv.offsetLeft+speed+'px';
                        }
                }                   
                start_1.onclick=function (){
                    clearInterval(clr);//试着把这段注释取消，然后多次点击按钮，发现物体会加速；
                    clr=setInterval(Move,30);

                }                               
                oid.onclick=function(){
                clearInterval(clr);
                }
            }

        </script>
    </head>
    <body>
        速度：<input type="text" name="spd" id="spd" value="" />
        <input type="button" name="aid" id="aid" value="停止" />
        <input type="button" name="" id="start" value="开始" />

        <div id="adiv">

        </div>
    </body>
</html>