setInterval与setTimeout的用法

最新推荐文章于 2025-01-01 08:30:00 发布

夏日樱花

最新推荐文章于 2025-01-01 08:30:00 发布

阅读量312

点赞数

分类专栏： js基础知识

本文链接：https://blog.csdn.net/weixin_43735593/article/details/84551620

版权

js基础知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

setInterval与setTimeout的用法

定时器是我们在工作中经常用到的一些方法，比如轮播图、弹窗、倒计时等场景，定时器是window的方法，所以this指向的一定是window（这是需要注意的)。
一个普通的倒计时方法：

<!--普通定时器倒计时-->
<div class="timer"></div>
<script>
    window.onload=function() {
        var div = document.getElementsByClassName('timer')[0];
        //定义一个时间差函数
        function time() {
            //结束的时间
            var target = new Date('2018-11-26 13:01:00');
            //当前时间
            var now = new Date();//不传值默认取当前时间
            var ms = target - now;
            //将获得的时间差(毫米单位),先将时间差转为秒（除以1000），再根据时间制获取值时分秒
            var h = Math.floor(ms / 1000 / 3600);
            h = h < 10 ? '0' + h : h;
            var m = Math.floor((ms / 1000) % 3600 / 60);
            m = m < 10 ? '0' + m : m;
            var s = Math.floor((ms / 1000) % 60);
            s = s < 10 ? '0' + s : s;
            var res = h + ':' + m + ':' + s;
            //将时间放在div内显示
            div.innerHTML = res;
            if(ms<1000){//最后1秒
                clearInterval(timer);
                timer=null;
            }
        }
        //定义一个定时器
        var timer = setInterval(time, 1000);
    }

注意，当倒计时为最后1秒时，就要清除定时器，否则定时器会多走一次。

一个普通的弹出动画定时器案例：

<style>
 .animate {
            width: 180px;
            height: 200px;
            background: #07bbff;
            position: fixed;
            right: 0;
            bottom: -200px;
        }
 </style>
 <body>
 <div class="animate">
        <span onclick="hide()">关闭</span>
    </div>
<script>
      //思路：出现时一个定时器，隐藏时一个定时器，过5秒后一个周期定时器
      var div=document.getElementsByClassName('animate')[0];
      var span=div.getElementsByTagName('span')[0];
      //获取div盒子的外联样式方法：
      var cssStyle=window.getComputedStyle(div,null);
      //出现事件
      function moveUp(){
	      //2s内完成 间隔时间为100ms,则需要20次，每次移动10px
	      //获取div的bottom并转为数字，用于计算
	      var bottom=parseInt(cssStyle.bottom);
	      if(bottom!=0){
		      bottom+=10;
		      div.style.bottom=bottom+'px';
		  }else{
		  	  clearInterval(timer);
		  	  timer=null;
		  }
      }
 		//隐藏事件
      function moveDown(){
	      //2s内完成 间隔时间为100ms,则需要20次，每次移动10px
	      //获取div的bottom并转为数字，用于计算
	      var bottom=parseInt(cssStyle.bottom);
	      if(bottom!=-200){
		      bottom-=10;
		      div.style.bottom=bottom+'px';
		  }else{
		  	  clearInterval(timer);
		  	  timer=null;
		  	  //消失后5秒在此出现
		  	  timer2=setTimeout(function(){
		  	  	timer=setInterval(moveUp,100);
		  	  },5000);
		  }
      }
      var timer=null;
      var timer2=null;
      //页面加载完成时出现
      window.onload=function(){
      		timer=setInterval(mouveUp,100);
      }
      //点击时消失
      function hide(){
      //做一个判断，避免在出现时进行点击,同时阻止事件冒泡
      	event.stopPropagation();
     	var bottom=parseInt(cssStyle.bottom);
     	if(bottom==0){
     	  timer=setInterval(moveDown,100);
     	}     		
      }
</script>
</body>

一个验证码定时器：

<button id="btn" onclick="timeDown()">点击获取验证码</button>
<script>
	var btn=document.getElementById('btn');
	//倒计时时间
	var sec=30;
	function time(){
	//消除定时器的界定都是1秒的时候
		if(sec>1){
			sec--;
			sec=sec<10?'0'+sec:sec;
			btn.innerHTML=sec+'s后重新获取';
			//禁止倒计时时点击
			btn.removeAttribute('onclick');
			btn.style.cursor='not-allowed';
	}else{
		clearInterval(timer);
		timer=null;
		//重新倒计时
		btn.setAttribute('onclick','timeDown()');
		btn.style.cursor='pointer';
		sec=30;
	}
}
var timer=null;
//点击时倒计时
function timeDown(){
	timer=setInterval(time,1000);
}
</script>