新人笔记16

最新推荐文章于 2024-05-03 17:45:10 发布

安于本命

最新推荐文章于 2024-05-03 17:45:10 发布

阅读量75

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zxcvbnm930/article/details/108622772

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

onmousemove

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmousemove="move(event)"></div>
		<img  id="img1" src="" alt="">
		鼠标的坐标<p id="p1"></p>
	</body>
	<script type="text/javascript">
		function move(e){
			var p1=document.getElementById("p1");
			var img1=document.getElementById("img1");
			p1.innerText=e.clientX+","+e.clientY;
			img1.style.top=e.clientY+"px";
			img1.style.left=e.clientX+"px";
		}
	</script>
</html>

运行图：
在这里插入图片描述

onmousewheel

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmousewheel="wheel(event)"></div>
	</body>
	<script type="text/javascript">
		var width=100;
		var height=100;
		function wheel(e){
			if(e.wheelData>0){
				width+=5;
				height+=5;
			}else{
				width-=5;
				height-=5;
				
			}
			var div1=document.getElementById("div1");
			div1.style.width=width+"px";
			div1.style.height=height+"px";
			
		}
	</script>
</html>

方块会跟着滚轮的滚动逐渐缩小。

onkeypress

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="what" onkeypress="search(event)" /> -->
	</body>
	<script type="text/javascript">
		function search(e){
			if(e.keyCode==13){
				var what=document.getElementById("what");
				alert("开始搜索："+what.value);
			}
		}
		
		
		
		
	</script>
</html>

运行图：
在这里插入图片描述

事件的注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--第一种注册方式-->
		<input type="text" id="txt1" onfocus=" focus1()" />
	</body>
	<script type="text/javascript">
		vor txt1 = document.getElementById("txt1");
		//注册事件的第二种方法
		txt1.onblur = blur2;
		//注册事件的第三种方法
		txt1.addEventListener(" change", function() {
			alert("值改变了")
		});
		function focus1() {
			text1.style.backgroundColor = "blue";
		}
		function blur2() {
			var txt1 = document.getElementById("txt1");
			txt1.style.backgroundColor = ("gray");
		}
	</script>
</html>

安于本命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新人笔记16

onmousemove<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ width: 300px; height: 300px; background-color: skyblue; } </style> &
复制链接

扫一扫