javascript基础（定时调用及其练习）（四十一）

最新推荐文章于 2021-03-11 10:31:22 发布

咸鸭蛋炒饭

最新推荐文章于 2021-03-11 10:31:22 发布

阅读量270

点赞数

分类专栏： HTML5基础篇文章标签： html javascript 经验

本文链接：https://blog.csdn.net/u010853130/article/details/55252066

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.定时调用简介：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使h1中的内容，每隔1s修改一次
				 */
				//获取h1
				var count = document.getElementById("count");
				//修改h1中的内容
				//count.innerHTML = 10;
				
				/*
				 * 创建一个for循环，多次修改h1中的内容
				 * 循环语句执行的速度是非常非常的快的
				 * 
				 */
				/*for(var i=0 ; i<10000 ; i++){
					count.innerHTML = i;
					alert("hello");
				}*/
				
				/*
				 * 定时调用
				 * 	- 定时调用指每间隔一段时间就调用指定的函数一次
				 * 	- 通过setInterval()来开启一个定时调用
				 *  - 参数：
				 * 		回调函数，该函数将会每间隔一段时间被调用一次
				 * 		时间，函数调用相隔的时间（毫秒）
				 * 
				 *  - 返回值：
				 * 		会返回一个number类型的值作为返回值，
				 * 			这个number就是定时器的标识
				 */
				
				//定义一个变量来计数
				var num = 1;
				
				var timer = setInterval(function(){
					count.innerHTML = num++;
					
					//判断num
					if(num == 11){
						//关闭定时器
						clearInterval(timer);
					}
					
				},1000);
				
				//console.log(timer);
				
				
				/*
				 * clearInterval()
				 * 	- 可以用来关闭一个定时器
				 * 	- 需要一个定时器的标识作为参数，需要用它来指定要关闭的定时器
				 */
				//clearInterval(timer);
				
			};
			
		</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.onload = function(){
				
				/*
				 * 图片自动切换
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组保存图片的路径
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				
				//创建一个变量，来保存图片的索引
				var index = 0;
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//为按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					/*
					 * 现在每点击一次按钮，就为图片开启一个定时器，
					 * 	点击几次就开启几次，就会导致同一个元素上会有多个定时器在执行动画效果
					 * 而且由于每次开启定时器都会覆盖timer，导致我们只能关闭最后一个定时器，其他的都不能关闭
					 * 
					 * 注意：我们为一个元素开启定时器时，一般都需要将该元素上的其他的定时器关闭，避免互相干扰
					 */
					
					//console.log(timer);
					
					//在开启定时器之前，关闭前边的定时器
					/*
					 * clearInterval()
					 * 	- 在停止一个定时器时，如果标识有效则会停止定时器
					 * 		如果标识无效则什么也不做，不会报错
					 */
					clearInterval(timer);
					
					//开启定时器用来切换图片
					timer = setInterval(function(){
						
						//使index自增
						index++;
						
						//判断index是否超过最大索引
						/*if(index > imgArr.length - 1){
							index = 0;
						}*/
						
						index = index % 5;
						
						//切换图片
						img.src = imgArr[index];
						
					},500);
				};
				
				
				//为btn02绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					/*
					 * 点击按钮以后，停止切换图片，关闭定时器
					 */
					clearInterval(timer);
					
				};
				
				
				
				
			};
			
		</script>
	</head>
	<body>
		
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
		<br /><br />
		
		<img src="img/1.jpg"/>
		
	</body>
</html>

3.练习二：定时加速

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使div可以根据不同的按键向不同的方向移动
				 * 
				 * 控制元素移动，两个要素
				 * 	1.移动的方向
				 * 	2.移动的速度
				 * 
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				
				//创建一个变量来表示速度
				var speed = 10;
				
				//定义一个变量，来表示移动的方向
				var dir = 0;
				
				//将控制div移动的代码提取出来，放到一个定时器中
				setInterval(function(){
					switch(dir){
						case 37 :
							//使div向左移动 , 减少left属性值
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39 :
							//使div向右移动 , 增加left属性值
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38 :
							//使div向上移动 , 减少top属性值
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40 :
							//使div向上移动 , 增加top属性值
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				},30);
				
				
				
				//绑定一个按键按下的事件
				document.onkeydown = function(event){
					
					event = event || window.event;
					
					
					//如果用户按了ctrl键，则加速
					if(event.ctrlKey){
						speed = 100;
					}else{
						speed = 10;
					}
					
					//当按键按下时，修改dir的值
					dir = event.keyCode;
					
					
				};
				
				//绑定一个onkeyup事件
				document.onkeyup = function(){
					
					dir = 0;
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>