Javascript进阶

最新推荐文章于 2022-07-27 20:31:20 发布

原创最新推荐文章于 2022-07-27 20:31:20 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #Javascript进阶

javaweb 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了JavaScript中的两种定时器：周期定时器（setInterval）和一次性定时器（setTimeout），并提供了图片轮播的示例代码，展示了如何使用周期定时器实现在网页上每隔一定时间自动切换图片的效果。同时，还提到了通过鼠标事件停止和恢复定时器的方法。

定时器
定时器可以分为两大类。循环定时、单次定时

 在js中 这两类定时器都有专业名词 
 周期定时器 (执行多次)、一次性定时器（执行一次）。
 两种定时器都有对应的停止方法

周期定时器

	每隔一段时间，执行一个方法或者一段代码。 需要指定一个时间.
	格式：
	启动一个周期定时器
	setInterval(code,millsec);
	code: 调用一个方法 或者 执行一段代码
	millsec:时间，单位是毫秒， 1秒等于1000毫秒


停止周期定时器
clearInterval(周期定时器对象);

实例：
			//setInterval(code,millsec);
			//setInterval(show,1000);  第一种  调用已经存在的方法
			setInterval('show()',1000);  //第二种  调用已经存在的方法
//			setInterval(function(){
//				console.log('day day up');
//			},1000);            第三种   现写代码
			
			//打印内容
			function show(){
				console.log('good good study');
			}

代码
在这里插入图片描述
周期性定时器-图片轮播
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>周期定时器-图片轮播</title>
		<style>
			ul{
				list-style: none;
				position: absolute;
				left: 180px;
				top:150px
			}
			li{
				border: 1px solid gray;
				border-radius: 50%;
				padding:2px;
				margin: 2px;
				float: left;
				background-color: gray;
				
			}
			
			
		</style>
	</head>
	<body>
		<img id="img1" src="img/dd_scroll_1.jpg" onmouseover="stop()" onmouseout="start()" />
		
		<ul>
			<li onmouseover="to(1)" style="background-color: orange;"></li>
			<li onmouseover="to(2)" ></li>
			<li onmouseover="to(3)"></li>
			<li onmouseover="to(4)"></li>
			<li onmouseover="to(5)"></li>
			<li onmouseover="to(6)"></li>
		</ul>
	</body>
	
	<script>
		
		var timer;
		var i = 1;
		window.onload = function(){
			 start();
		}
		
		function start(){
			//制作周期定时器
			timer = setInterval('lunbo()',2000);
		}
		
		function stop(){
			//鼠标移动到图片上，停止周期定时器
			clearInterval(timer);
		}
		
		
		function lunbo(){
			//换图实际上就更改 img 标签的 src 属性
			var img1 = document.getElementById("img1");
			
			
			i++;   //换图的重要步骤
			
			//处理i的值， 在有效范围内 1-6
			if(i==7){
				i = 1;
			}
			
			//修改src属性值
			img1.src = "img/dd_scroll_"+i+".jpg";
			
			//修改li的背景颜色
			var lis = document.getElementsByTagName("li");
			for(var j =0;j<lis.length;j++){
				lis[j].style.backgroundColor = "gray";
			}
			lis[i-1].style.backgroundColor = "orange";
			
		}
		
		
		function to(num){
			stop();
			img1.src = "img/dd_scroll_"+num+".jpg";
			
			i = num;
			
			//修改li的背景颜色
			var lis = document.getElementsByTagName("li");
			for(var j =0;j<lis.length;j++){
				lis[j].style.backgroundColor = "gray";
			}
			lis[num-1].style.backgroundColor = "orange";
		}
		
		
	</script>
</html>