setTimeout 和 setInterval 总结

来源：互联网发布：淘宝针织衫哪家好编辑：程序博客网时间：2024/06/07 20:20

这里写图片描述

实例一：定时重发验证码

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">    window.onload=function(){        var send=document.getElementById('send'),            times=60,            timer=null;        send.onclick=function(){          // 计时开始          send.disabled = 'disabled';          setTimeout(function(){          send.disabled = null;             }, 1000*times);          if(timer){            clearTimeout(timer);            timer=null;          }        }     }    </script></head><body>    <input type="button" id="send" value="发送验证码"></body></html>

实例二：tab 选项卡延时切换

function $(id){    return typeof id==='string'?document.getElementById(id):id;}window.onload=function(){  // 标签的索引  var index=0;  var timer=null;  var lis=$('notice-tit').getElementsByTagName('li'),      divs=$('notice-con').getElementsByTagName('div');  if(lis.length!=divs.length) return;  // 遍历所有的页签  for(var i=0;i<lis.length;i++){    lis[i].id=i;    lis[i].onmouseover=function(){      // 用that这个变量来引用当前滑过的li      var that=this;      // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行      if(timer){        clearTimeout(timer);        timer=null;      }      // 延迟半秒执行      timer=window.setTimeout(function(){        for(var j=0;j<lis.length;j++){          lis[j].className='';          divs[j].style.display='none';        }        lis[that.id].className='select';        divs[that.id].style.display='block';      },500);    }  }}

实例三：自动切换的tab选项卡切换效果

function $(id){  return typeof id==='string'?document.getElementById(id):id;}window.onload=tab;function tab(){  // 当前高亮显示的页签的索引  var index=0;  var timer=null;  // 获取所有的页签和要切换的内容  var lis=$('notice-tit').getElementsByTagName('li');  var divs=$('notice-con').getElementsByTagName('div');  // 遍历每一个页签且给他们绑定事件  for(var i=0;i<lis.length;i++){    lis[i].id=i;    lis[i].onmouseover=function(){      clearInterval(timer);      changeOption(this.id);    }    lis[i].onmouseout=function(){        timer=setInterval(autoPlay,2000);        }  }  /**  消除 timer  if(timer){    clearInterval(timer);    timer=null;  }   添加定时器，改变当前高亮的索引  timer=setInterval(autoPlay,2000);  **/  function autoPlay(){      index++;      if(index>=lis.length){         index=0;      }      changeOption(index);  }  function changeOption(curIndex){    for(var j=0;j<lis.length;j++){       lis[j].className='';       divs[j].style.display='none';    }    // 高亮显示当前页签    lis[curIndex].className='select';    divs[curIndex].style.display='block';    index=curIndex;  }}

实例四：图片轮播

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {  margin: 0;  padding: 0;  list-style: none;}.wrap {  height: 170px;  width: 490px;  margin: 60px auto;  overflow: hidden;  position: relative;  margin: 100px auto;}.wrap ul {  position: absolute;}.wrap ul li {  height: 170px;}.wrap ol {  position: absolute;  right: 5px;  bottom: 10px;}.wrap ol li {  height: 20px;  width: 20px;  background: #ccc;  border: solid 1px #666;  margin-left: 5px;  color: #000;  float: left;  line-height: center;  text-align: center;  cursor: pointer;}.wrap ol .on {  background: #E97305;  color: #fff;}</style><script type="text/javascript">  window.onload = function() {    var wrap = document.getElementById('wrap'),       pic = document.getElementById('pic'),       images = pic.getElementsByTagName("li");      list = document.getElementById('list').getElementsByTagName('li'),      index = 0,       timer = null;    // 定义并调用自动播放函数    function autoPlay() {      index++;      if (index >= list.length) {        index = 0;      }      changeImage(index);    }    // 定义图片切换函数     function changeImage(curIndex) {      for (var j = 0; j < list.length; j++) {        list[j].className = '';        images[j].style.display = 'none';      }      // 高亮显示当前页签      list[curIndex].className = 'on';      images[curIndex].style.display = 'block';      index = curIndex; //这是为了预防 onmouseover-out- 之后不能正确调到下一个的措施    }    // 鼠标划过整个容器时停止自动播放  wrap.onmouseover = function (){      clearInterval(timer);    }    // 鼠标离开整个容器时继续播放至下一张  wrap.onmouseout = function(){      //changeImage(index++);      timer = setInterval(autoPlay, 500);    }    // 遍历所有数字导航实现划过切换至对应的图片    for (var i = 0; i < list.length; i++) {      list[i].id = +i;      list[i].onmouseover = function (){        changeImage(this.id);        clearInterval(timer);      }    };    // 添加定时器，改变当前高亮的索引   timer = setInterval(autoPlay, 2000);  }</script></head><body>  <div class="wrap" id='wrap'>    <ul id="pic">      <li><img        src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>      <li><img        src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>      <li><img        src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>      <li><img        src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>      <li><img        src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    </ul>    <ol id="list">      <li class="on">1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <li>5</li>    </ol>  </div></body></html>

1 0