学习使我快乐第十八天

最新推荐文章于 2023-11-03 09:43:47 发布

Mr_suyi

最新推荐文章于 2023-11-03 09:43:47 发布

阅读量361

点赞数

分类专栏： python HTML 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/mr_suyi/article/details/125792262

版权

python 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

Day 018

一、JavaScript 中的定时器

1.js中的定时器

Interva 定时器
setTimeout(类似于定时炸弹)

2.Interva 定时器的开启和关闭

开启： setInterval(函数，时间) – 创建定时器，每隔指定时间，自动调用指定的函数(时间单位是毫秒)，返回一个定时器对象
关闭： clearInterval(定时器对象)
例：我们可使用定时器完成一些简单的页面动态效果，如让页面上的方块匀速向下移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
<!-- 首先创建一个方块 -->
	<div id = box style="background-				   color:red;width:80px;height:80px;position: absolute;top:10px"></div>
		
	</body>
	<script type="text/javascript">
	// 使用定时器 使其每0.1秒移动2像素
        top1=10
        setInterval((function){
        top1+=2
        document.getElementById('box').style.top = top1+'px'
		},100)
	</script>
	
</html>

3.setTimeout(类似于定时炸弹)定时器：在计时完毕后自动消失。

例子：在控制台过1秒打印hello

<script type="text/javascript">

	t_3=setTimeout(function(){
		console.log('hello')
	},1000)
</script>

只会打印一次，且setTimeout定时器也可以通过clearTimeout方法提前关闭

二、JavaScript 中的事件绑定

1.事件绑定 - 让网页内容对人类的指定的行为做出反应。

事件三要素：事件源、事件、事件驱动程序

2.绑定事件的方法。

a. 在标签内部给事件源的事件属性赋值：<标签名 οnclick=“事件驱动程序（对应的可以是个函数）”></标签名>
函数中的this是window对象

b.在js中给标签对应的节点的事件属性赋值：事件源节点.οnclick= 事件驱动对应的函数
注意：事件驱动程序对应的函数必须是普通的函数的函数名或者是匿名函数
函数中的this是对象源

c.在js中通过节点对象的addEventListener来绑定事件：事件源节点.addEventListener（事件名称，时间驱动程序对应的函数）
绑定方式一注意：此处时间名称需要去掉on

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<button type="button"id = "btn1" onclick="func()">问候</button>
		
		<button type="button"id = "btn2" >询问</button>
		
		<button type="button"id = "btn3" >问候</button>

	</body>
	
</html>
<script type="text/javascript">
		// 绑定方式1：
	function func(){
		alert('你好吗？')
		console.log(this)
	}

	// 绑定方式2：
	document.getElementById('btn2').onclick = function(){
		alert('你今年多大了')
	}

	// 绑定方式3：
	document.getElementById('btn3').addEventListener('click',function(){
		confirm('是否删除')
	})
</script>

练习：数字加减按钮



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
    <script type="text/javascript">

        num = 0
        function a(){
            num++
            document.getElementById('p1').innerText=num
        }
        function b(){
            num--
            document.getElementById('p1').innerText=num
        }
    </script>
	
	<body>

		<button type="button" onclick="a()">+</button>
		<p id ='p1'>0</p>
		<button type="button" onclick="b()">-</button>
		
		
		
	</body>
	
</html>

练习：删除按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<button class="del">删除1</button>
		<button class="del">删除2</button>
		<button class="del">删除3</button>
		<button class="del">删除4</button>
		<button class="del">删除5</button>
		<button class="del">删除6</button>
		<button class="del">删除7</button>
		<button class="del">删除8</button>
	</body>
</html>


<script type="text/javascript">

	// ========================删除练习=====================
	//方法1：
	// function delAction1(){
	// 	document.getElementById('d1').remove()
	// }
	// function delAction2(){
	// 	document.getElementById('d2').remove()
	// }
	// function delAction3(){
	// 	document.getElementById('d3').remove()
	// }
	// function delAction4(){
	// 	document.getElementById('d4').remove()
	// }
	// 方法2：
	function delAction(){
		this.remove()
	}
	
	btns = document.getElementsByClassName('del')
	for(index=0; index<8; index++){
		btns[index].onclick = delAction
	}
	
	
</script>

三、常见的事件类型

1.鼠标点击事件（任何可见的标签都可以绑定鼠标事件）

onclick - 鼠标点击事件
onmouseover - 鼠标悬停在标签上的事件
onmouseout - 鼠标从标签上离开的事件

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 鼠标事件 -->
		<button type='button' onclick="alert('点击')">点击</button>
		
		<button type='button' onmouseover="alert('鼠标悬停')">悬停</button>
		
		<button type='button' onmouseout="alert('鼠标离开')">离开</button>
		<!-- 鼠标事件练习 -->
		<button type="button" id= "d1" onmouseover="fun()" onmouseout="fun2()">点我呀</button>
		
 <script>
	 function fun(){
		 document.getElementById('d1').innerText='哎嘿 你点不了'
	 }
	 function fun2(){
	 		 document.getElementById('d1').innerText='哎嘿 你点我呀'
	 }
	 /*

 </script>

2.键盘按键事件（一般输入框）

onkeypress - 某个按键按下对应的事件
onkeydown - 某个按键按下对应的事件
onkeyup - 某个按键按下后弹起对应的事件
注意：按键相关事件在绑定的时候必须通过js绑定（方法二或方法三），才可以在函数种添加对应的参数，来获取按键信息。

3.值改变 onchange - 用于检测下拉列表发生改变的时候

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<!-- 值事件 -->
		<select name="city" id="city">
			<option value="成都">成都</option>
			<option value="重庆">重庆</option>
			<option value="上海">上海</option>
			<option value="北京">北京</option>
		</select>
	</body>
</html>

 <script type="text/javascript">
	city = document.getElementById('city')
	city.onchange= function(){
	console.log('选项发生改便',city.value)
	}
 </script>

练习：缩略图

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   </head>
   <body>
   	<div>
   		<img id = "img0" src="./img/picture-1.jpg" >
   		<br>
   		<img src="./img/thumb-1.jpg" id="img1">
   		<img src="./img/thumb-2.jpg" id="img2">
   		<img src="./img/thumb-3.jpg" id="img3">
   	</div>
   
   	<script type="text/javascript">
   		p0 = document.getElementById('img0')
   		p1 = document.getElementById('img1')
   		p2 = document.getElementById('img2')
   		p3 = document.getElementById('img3')
   		
   		p1.onmouseover =function(){
   			p0.src="./img/picture-1.jpg"
   		}
   		p1.onmouseout =function(){
   			p0.src="./img/picture-1.jpg"
   		}
   		
   		
   		p2.onmouseover =function(){
   			p0.src="./img/picture-2.jpg"
   		}
   		p2.onmouseout =function(){
   			p0.src="./img/picture-1.jpg"
   		}
   		
   		p3.onmouseover =function(){
   			p0.src="./img/picture-3.jpg"
   		}
   		p3.onmouseout =function(){
   			p0.src="./img/picture-1.jpg"
   		}
   	</script>
   	
   	
   	
   </body>
</html>