前端学习之路——JS(下)

温酒09

已于 2023-07-05 09:31:07 修改

阅读量72

点赞数

分类专栏：前端基础文章标签： javascript

于 2022-03-30 11:09:13 首次发布

本文链接：https://blog.csdn.net/weixin_37942054/article/details/123841400

版权

前端基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #0000FF;
			}
		</style>
		<div onmousemove="over()"  onmousemove="move()"
		 onmousemove="out()" onmousedown="down()" id="d1" onmouseup="up()">0-0</div>
		<script type="text/javascript">
			
			function move(){
				console.log("鼠标移动");
			}
			function over(){
				console.log("鼠标移入");
			}
			function down(){
				console.log("点击鼠标");
			}
			function out(){
				console.log("鼠标移除");
			}
			function up(){
				console.log("鼠标抬起");
			}
		</script>
	</body>
</html>

2、键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" onkeydown="down()" onkeyup="up()" />
		
		<script type="text/javascript">
			function down(){
				console.log("按下键盘编码"+event.keyCode);
				//event 事件对象，代表事件的状态
				//例如：触发event对象的元素，鼠标的位置及状态等。
				//event对象只在事件发生的过程中才有效
			}
			function up(){
				console.log("抬起键盘的字符"+String.fromCharCode(event.keyCode));
			}
		</script>
	</body>
</html>

3、状态改变事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="city" id="s1" onchange="changefn()">
			<option value="c1">长春</option>
			<option value="c2">jil</option>
			<option value="c3">备考</option>
		</select>
		<br>
		<input type="text"  id="i1" onfocus="focusfn()" onblur="blurfn()"
		 placeholder="请输入用户名"/>
		 
		 <span id="s2"></span>
		<script type="text/javascript">
			function changefn(){
				alert(s1.value);
			}
			function focusfn(){
				console.log("正在输入...");
			}
			function blurfn(){
				if(i1.value == "tony"){
					s2.innerText="id已存在";
				}else{
					s2.innerText = "用户名通过";
				}
				console.log("正在输出...");
			}
		</script>
	</body>
</html>

4、定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="myh1">0</h1>
		<h1 id="myh2">0</h1>
		<script type="text/javascript">
			/* 
			第一种定时器： setInterval(要执行的函数，间隔的毫秒值)
			 按照指定的周期(毫秒)调用函数，方法会不停的调用，
			 直到调用clearInterval()停止
			 */
			let time = 0;
			function f1(){
				time++;
				myh1.innerText = time;
				if(time==10){
					clearInterval(timer);
				}
			}
			let timer = setInterval(f1,1000);
			
			let t = 0;
			let timer2 = setInterval(function f2(){
				myh2.innerText = ++t;
				if(t == 10){
					clearInterval(timer2);
				}
			},100);
			
			/* 
			第二种定时器 ： setTimeout()
			 在指定毫秒数之后调用函数，只调用一次
			 */
			setTimeout(function(){
				alert("时间到")
			},5000);
		</script>
	</body>
</html>

5、定时器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1">
			
		</div>
		
		<!-- 打开页面5秒后，弹框提示时间到
		 用户点击确认后，开始加载图片，每隔1秒加载1次，加载到20张图片为止。
		 -->
		 <script type="text/javascript">
		 let t =0;
		 	setTimeout(function(){
				alert("时间到");
				let timer = setInterval(function(){
					d1.innerHTML += "<img src = '../img/bee01.png'/>";
					t++;
					if(t==20){
						clearInterval(timer);
					}
				},1000);
			},5000);
		 </script>
	</body>
</html>