JS的setInterval定时器

2021年09月15日 阅读数:4
这篇文章主要向大家介绍JS的setInterval定时器,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

以前的博文:JS点击上一张下一张轮播li标签1
是经过点击按钮切换上一张下一张图片,这个是手动操做的,JS里还有定时器能够设置每隔多少时间执行一次。
例如以前博文的那个,把下一张的next()方法,挂到定时器上,每隔一秒执行一次这个next()方法,就能够实现每隔一秒自动切换图片。
格式:setInterval(方法,时间);
例如 :setInterval(next(),1000);//每隔一秒执行一次next()方法。
这里的1000单位是毫秒,秒和毫秒的换算单位为:1秒=1000毫秒html

测试代码:这里用log输出下时间,测试下每次执行的方法的时间。定时器前面的代码都是以前博文的,有介绍。测试

<style>
.box1{list-style-type:none;width:200px;height:100px;overflow:hidden;position:relative;}
.box1 li{width:200px;height:100px;position:absolute;top:0px;left:0px;}
.box1 li.now{opacity:1;}/**1表明彻底不透明**/
.box1 li.others{opacity:0;}/**1表明彻底透明**/
 </style>
 </head>
 <body>
 <div class="box1">
     <ul class="list1">
       <li id="img1" class="now"><img src="images/img1.png"></li>
       <li id="img2" class="others"><img src="images/img2.png"></li>
       <li id="img2" class="others" style="background:red"></li>
     </ul>
 </div>
 <input type="button" value="上一张" onclick="pre()"><br>
  <input type="button" value="下一张" onclick="next()">
 <script>
 var index=0;
 var lis=document.getElementsByTagName("li");
 var indexlength=lis.length-1;//长度-1是最后一个的索引
function pre(){
    index--;
    if(index<0)
    {
        index=indexlength;
    }  
    for(var i=0;i<lis.length;i++)
    {
     lis[i].className="others";
    }
    lis[index].className="now";
};
function next(){
    index++;
    if(index>indexlength)
    {
        index=0;
    }  
    for(var i=0;i<lis.length;i++)
    {
     lis[i].className="others";
    }
    lis[index].className="now";
};
var timer=setInterval(function(){next();var date=new Date();console.log("时间:"+(new Date()).toLocaleTimeString());},1000);
 </script>

图示 :
共3张图片,循环播放这三个图,因为index索引是从0开始的,因此第0张就是第一张,第1张就是第2张,第2张就是第三张。spa