JS基础-定时器简介-尚硅谷-P127

比目鱼～

于 2022-01-30 12:20:58 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43624193/article/details/122751773

JS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何利用JavaScript中的setInterval方法实现一个简单的自动递增计数器。通过设置定时器，每秒钟更新页面上显示的数字，直到达到预定的目标值后停止。此示例适用于网页开发初学者理解定时器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视频链接：
视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//
				var count=document.getElementById("count");
				//使count中的内容自动切换
				// count.innerHTML="2";
				/**
				 * setInterval()
				 * --可以将一个函数每隔一段时间执行一次
				 * ---参数：1.回调函数
				 * --------2.每次调用间隔的时间，单位是毫秒
				 * 返回值：
				 * ---会返回一个Number类型的数据
				 * ---这个数字用来作为定时器的唯一标识
				 * ---				 
				 */
				var num=1;
				var timer=setInterval(function(){
					count.innerHTML=num++;
					if(num==11){
						//关闭定时器
						clearInterval(timer);
					}
				},1000);
			//	console.log(timer);
				//clearInterval可以用来关闭一个定时器
				//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
				
			}
		</script>
	</head>
	<body>
		<h1 id="count">1</h1>
	</body>
</html>