【前端】JavaScript入门及实战126-130

发布于：2024-08-08 ⋅ 阅读:(65) ⋅ 点赞:(0)

文章目录

126 Location

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	
</style>
<script type="text/javascript">
	/*
		Location：该对象中封装了浏览器的地址栏的信息
	*/
	window.onload = function(){
		// 获取按钮对象
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			// 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
			//alert(location);
					
			/*
				如果直接将location属性修改为一个完整的路径，或相对路径
				则我们页面会自动跳转到该路径，并且会生成相应的历史记录
			*/
			//location = "http://www.baidu.com";
			//location = "01.BOM.html";
					
			/*
				assign()：用来跳转到其他的页面，作用和直接修改location一样
			*/
			//location.assign("http://www.baidu.com");
					
			/*
				reload()：用于重新加载当前页面，作用和刷新按钮一样，
						  如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
			*/
			//location.reload(true);
					
			/*
				replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
						   不会生成历史记录，不能使用回退按钮回退
			*/
			location.replace("01.BOM.html");
		};			
	};
</script>
</head>
<body>
	<button id="btn">点我一下</button>
	<h1>Location</h1>
	<input type="text" />
	<a href="01.BOM.html">去BOM</a>	
</body>
</html>

127 定时器

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

128 切换图片练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	
</style>
<script type="text/javascript">
	window.onload = function(){
		/*
			使图片可以自动切换
		*/
		// 获取img标签
		var img1 = document.getElementById("img1");
				
		// 创建一个数组来保存图片的路径
		var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				
		// 创建一个变量，用来保存当前图片的索引
		var index = 0;
				
		// 定义一个变量，用来保存定时器的标识
		var timer;
				
		// 为btn01绑定一个单击响应函数
		var btn01 = document.getElementById("btn01");
		btn01.onclick = function(){
			/*
				目前，我们每点击一次按钮，就会开启一个定时器，
				点击多次就会开启多个定时器，这就导致图片的切换速度过快，
				并且我们只能关闭最后一次开启的定时器
			*/
			// 在开启定时器之前，需要将当前元素上的其他定时器关闭
			clearInterval(timer);
					
			/*
				开启一个定时器，来自动切换图片
			*/
			timer = setInterval(function(){
				// 使索引自增
				index++;
				// 判断索引是否超过最大索引
				/*if(index >= imgArr.length){
					//则将index设置为0
					index = 0;
				}*/
				index %= imgArr.length;
				// 修改img1的src属性
				img1.src = imgArr[index];
			},1000);
		};
				
		// 为btn02绑定一个单击响应函数
		var btn02 = document.getElementById("btn02");
		btn02.onclick = function(){
			// 点击按钮以后，停止图片的自动切换，关闭定时器
			/*
				clearInterval()可以接收任意参数，
				如果参数是一个有效的定时器的标识，则停止对应的定时器
				如果参数不是一个有效的标识，则什么也不做
			*/
			clearInterval(timer);
		};
	};
</script>
</head>
<body>
	<img id="img1" src="img/1.jpg"/>
	<br /><br />
	<button id="btn01">开始</button>
	<button id="btn02">停止</button>
</body>
</html>

129 修改移动div练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	#box1 {
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
	}
</style>
<script type="text/javascript">
	// 使div可以根据不同的方向键向不同的方向移动
	/*
		按左键，div向左移
		按右键，div向右移
		。。。
	*/
	window.onload = function(){
		// 定义一个变量，来表示移动的速度
		var speed = 10;
				
		// 创建一个变量表示方向
		// 通过修改dir来影响移动的方向
		var dir = 0;
				
		// 开启一个定时器，来控制div的移动
		setInterval(function(){
			/*
				37 左
				38 上
				39 右
				40 下
			*/
			switch(dir){
				case 37:
					//alert("向左"); left值减小
					box1.style.left = box1.offsetLeft - speed + "px";
					break;
				case 39:
					//alert("向右");
					box1.style.left = box1.offsetLeft + speed + "px";
					break;
				case 38:
					//alert("向上");
					box1.style.top = box1.offsetTop - speed + "px";
					break;
				case 40:
					//alert("向下");
					box1.style.top = box1.offsetTop + speed + "px";
					break;
			}
		},30);
				
		// 为document绑定一个按键按下的事件
		document.onkeydown = function(event){
			event = event || window.event;
					
			// 当用户按了ctrl以后，速度加快
			if(event.ctrlKey){
				speed = 500;
			}else{
				speed = 10;
			}
					
			// 使dir等于按键的值
			dir = event.keyCode;
		};
				
		// 当按键松开时，div不再移动
		document.onkeyup = function(){
			// 设置方向为0
			dir = 0;
		};
	};
</script>
</head>
<body>
	<div id="box1"></div>
</body>
</html>

130 延时调用

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
	
</style>
<script type="text/javascript">
	var num = 1;
	
	// 开启一个定时器
	/*setInterval(function(){
		console.log(num++);
	},3000);*/
			
	/*
		延时调用，
		延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
			 
		延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
			  
		延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
	*/
	var timer = setTimeout(function(){
		console.log(num++);
	},3000);
			
	// 使用clearTimeout()来关闭一个延时调用
	clearTimeout(timer);
</script>
</head>
<body>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布