js案例应用

发布时间：2024年01月16日

1、星星点灯

实现在屏幕上进行点击就可以创建闪闪发光的星星沾满屏幕

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>

		<script>
			// 屏幕背景设置为黑色
			document.body.style.background = "#000"
			// 屏幕加载完html后执行以下操作
			window.onload = function() {
				// 创建点击事件
				document.onclick = function(event) {
					// 创建img标签
					let img = document.createElement("img")
					// img图片源
					img.src = "./0.gif"
					// 图片位置位绝对位置
					img.style.position = "absolute"
					// 点击后添加img标签
					document.body.appendChild(img)
					// 屏幕加载完后执行以下函数
					img.onload = function() {
						// 获取图片的宽、高设置为常熟
						const img_w = parseInt(getComputedStyle(img).width)
						const img_h = parseInt(getComputedStyle(img).height)
						// 随机获取图片的宽
						w = getRandom(20, 200)
						// 根据比例设置图片高
						h = img_h / img_w * w
						// 根据以上的宽高设置图片的宽高
						img.style.width=w+"px"
						img.style.height=h+"px"
						// 图片在屏幕的坐标
						img.style.left=(event.pageX-w/2)+"px"
						img.style.top=(event.pageY-h/2)+"px"


					}
				}
				// 计算随机数的函数
				function getRandom(min,max){
					return min+Math.ceil((max-min)*Math.random())
				}
			}
		</script>
	</body>
</html>

实例效果图

移动的div

实现鼠标点击后移动到哪里，相应标签就移动的哪里，鼠标松开后停止移动

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
 
			div {
				width: 100px;
				height: 60px;
				background-color: red;
				border-radius: 50%;
				text-align: center;
				padding-top: 40px;
			}
		</style>
	</head>
	<body>
		<div>太阳</div>
 
		<script>
			// 获取div标签
			let div = document.querySelector("div")
			// 设置标签的绝对位置
			div.style.position = "absolute"
			// 获取div的宽高，转成整形
			w = parseInt(getComputedStyle(div).width)
			h = parseInt(getComputedStyle(div).height)
			// 鼠标点击下去后执行的事件
			div.onmousedown = function(event) {
				// 点击后鼠标移动的事件
				div.onmousemove = function(ev) {
					console.log(ev.offsetX)
					console.log(ev.offsetY)
					
					div.style.left = (ev.pageX - w / 2) + "px"
					div.style.top = (ev.pageY - h / 2) + "px"
				}
			}
			// 鼠标松开后执行停止“上边的移动事件”
			div.onmouseup = function() {
				div.onmousemove = null
			}
		</script>
	</body>
</html>

文章来源:https://blog.csdn.net/m0_64620936/article/details/135636688
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章