定时器

最新推荐文章于 2024-08-26 08:49:30 发布

dweblover

最新推荐文章于 2024-08-26 08:49:30 发布

阅读量423

点赞数 1

分类专栏： JavaScript 文章标签： JS

本文链接：https://blog.csdn.net/dweblover/article/details/87018427

版权

本文介绍了JavaScript中的定时器，包括setInterval和setTimeout的使用，它们的区别以及在图片切换等场景中的应用。同时讲解了如何通过clearInterval和clearTimeout来关闭定时器和延时调用。最后，提到了定时器在键盘事件处理中的作用。

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

1.定时器简单介绍
（1）JS的程序运行速度是非常快的，如果希望一段程序可以每隔一段时间执行一次可以使用定时调用。
（2）setInterval()定时调用，可以将一个函数每隔一段时间执行一次；参数：第一个参数为回调函数，该函数会每隔一段时间被调用一次，第二个参数为，每次调用间隔的时间，单位是毫秒。
（3）setInterval()有一个返回值，返回一个Number类型的数据，这个数字用来作为定时器的唯一标识。
（4）clearInterval()可以用来关闭一个定时器，该方法中需要一个定时器的标识作为参数，这样将关闭对应的定时器。clearInterval()可以接收任意参数，如果参数是一个有效的定时器标识则停止对应的定时器，如果参数不是一个有效的标识则什么也不做

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<script type="text/javascript">
window.function()
{
	//获取count
	var ct=document.getElementById("count");
	//是<h1>里的内容自动变换
		var i=1
	var timer=setInterval(function()
	{
		ct.innerHTML=i++;
		//如果i==11就关闭定时器
		if(i==11)
		{
			clearInterval(timer);
		}
		},1000);	
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>

2.定时器的应用之图片的切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<script type="text/javascript">
window.function()
{
	//获取img
	var ig=document.getElementById("img1");
	//获取按钮
	var btn=document.getElementById("btn01");
	var btn2=document.getElementById("btno2");
	//创建图片数组来保存图片路径
	var igarr=["img/2.jpg&#