js--EcmaScript(定时器)

最新推荐文章于 2022-04-09 16:38:06 发布

司天宏

最新推荐文章于 2022-04-09 16:38:06 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/qq_41532872/article/details/86483366

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

循环定时器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img  src="../img/gz/27125326.jpg" id="pic" />
	<!--	循环定时器：setInterval()，周期性执行指定的函数或js代码
		  参数1：要调用的函数或代码串
		 参数2：周期性执行的时间间隔，单位是毫秒，每隔多少毫秒就执行一次函数或代码
		 
		 重复调用某个函数，2种调用语法：
		 语法1：setInterval(函数名, 时间间隔);只适合调用无参的函数
		 语法2：setInterval("函数名()", 时间间隔);可以调用无参函数或者有参的函数
	-->
	  <script>
	  	
	  	  function   say(who){
	  	  	 console.log("I love "+who);
	  	  }
	  	    setInterval("say('范冰冰')",1000);
	  	    //每隔2s后就切换一张图片，图片轮播特效
	  	    //把要切换的图片相对路径
	  	    var imgs=["../img/gz/27125326.jpg","../img/gz/27125327.jpg","../img/gz/27125328.jpg",
	  	    "../img/gz/27125329.jpg"];
	  	    
	  	    //改变图片路径的函数
	  	    var i=1;
	  	    function changePic(){
	  	    	  //设置图片标签的src,也就是显示的图片路径
	  	    	 document.getElementById('pic').src=imgs[i];
	  	    	 i++;
	  	    	 if(i==imgs.length){
	  	    	 	 i=0;
	  	    	 }
	  	    }
	  	    setInterval(changePic,2000);
	  	    
	  </script>
	</body>
</html>

炸弹定时器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		5秒后跳转到百度
		
	<!--	炸弹定时器：setTimeOut()，到达指定时间后执行指定的函数或js代码一次
		  参数1：要调用的函数或代码串
		 参数2：执行的时间间隔，单位是毫秒，每隔多少毫秒就执行一次函数或代码
		 
		 调用某个函数一次，2种调用语法：
		 语法1：setTimeOut(函数名, 时间间隔);只适合调用无参的函数
		 语法2：setTimeOut("函数名()", 时间间隔);可以调用无参函数或者有参的函数
	-->
	  <script>
	  	
	  	  function   say(who){
	  	  	 console.log("I love "+who);
	  	  }
	  	   // setTimeout("say('范冰冰')",1000);
	  	  
	  	   function  goToUrl(){
	  	   	     //改变网址路径
	  	   	     window.location.href="http://www.baidu.com";
	  	   }
	  	    setTimeout(goToUrl,5000);
	  </script>
	</body>
</html>

在这里插入图片描述

清除定时器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		
	<!--	
		清除定时器：有时候需要在某个时刻停止定时器的反复执行，如何结束？
		 1.给定时器函数加1个返回值，该返回值就是定时器的唯一标识
		 2.在需要结束定时器的时候，调用clearInterval(定时器的唯一标识)来结束循环定时器,
		 clearTimeOut()结束炸弹定时器
		 
	-->
	  <script>
	  	  var i=0;
	  	  function   say(who){
	  	  	 console.log("I love "+who);
	  	  	 i++;
	  	  	 if(i==10){
	  	  	 	 //清除定时器
	  	  	 	 clearInterval(timeId);
	  	  	 }
	  	  }
	  	 var timeId=   setInterval("say('范冰冰')",1000);
	  </script>
	</body>
</html>

在这里插入图片描述