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

来源：互联网发布：西装软件编辑：程序博客网时间：2024/05/18 12:35

首先先看代码

<!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>

谢谢支持

0 0