定时器及案例

最新推荐文章于 2024-08-05 15:43:36 发布

夜夜夜璟归

最新推荐文章于 2024-08-05 15:43:36 发布

阅读量836

点赞数 1

文章标签： servlet java javascript

本文链接：https://blog.csdn.net/m0_72313625/article/details/126630518

版权

本文详细介绍了JavaScript中的setTimeout()和setInterval()定时器的使用，包括语法规范、停止定时器的方法，并通过广告自动消失、图片消失、京东倒计时、发送短信限制等案例进行实战讲解，帮助读者理解定时器的工作原理和应用场景。

摘要由CSDN通过智能技术生成

一：setTimeout() 定时器

1 ）语法规范： window.setTimeout(调用函数，延时时间)；书写时window可以省略

注意：
1.这个window在调用的时候可以省略
2.这个延时时间单位是毫秒，但是可以省略，如果省略，默认是0
3.这个调用函数可以直接写函数，还可以写函数名，还有一个写法'函数名（）'但是最后一种写法极度不提倡该写法
4.页面中可能有很多定时器，我们经常给定时器加标识符（名字）

// 写法一：
			setTimeout(function(){
				alert('你可真是个大聪明')
			},2000);
			
			//写法二：
			// 先定义一个函数
			function callback(){
				alert('你可真是个大聪明')
			}
			
			// // 然后setTimeout 直接调用该函数就可以，但是第一个调用函数的时候不需要加上小括号，直接写函数名调用即可，后面跟着的还是毫秒数
			
			var time1 = setTimeout(callback,3000);
			var time2 = setTimeout(callback,5000);
			// 这两个都可以使用，不会出现重复的和冲突的问题，但是我们给他们命名不同的名字就可以得到不同的定时器

2）停止 setTimeout()定时器，通过clearTimeout() 就可以停止定时器

clearTimeout() 括号里面的参数是定时器的标识符，也就是定时器的名字，正常情况下，我们写计时器的时候，都会给他附上标识符，所以我们要停止计时器的时候，只需要在clearTimeout() 括号里面加上计时器名字就可以暂停

         <button>点击停止定时器</button>


           var time = setTimeout(function() {
				alert('你可真是个大聪明')
			}, 5000);
			window.addEventListener('load',function(){
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					clearTimeout(time)
				})
			})

案例：广告显示五秒之后广告自动消失

核心思路：5秒之后，把这个广告隐藏起来用定时器setTimeout计时器

 <img src="image/ad.jpg" alt="">
		 
		 <script>
			 var img = document.querySelector('img');
			 setTimeout(function(){
				 img.style.display = 'none'
			 },5000)

案例：图片的消失（解题思路大致是相同的）

<style>
			div{
				width: 250px;
				height: 50px;
				margin: 20px auto;
				text-align: center;
				color: red;
			}
			
			img{
				display: block;
				width: 300px;
				margin: 0 auto;
			}
			button{
				display: block;
				border-style: none;
				border-radius: 5px;
				margin: 10px  auto;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<button>查看回忆</button>
		<div></div>