web前端案例之星星点灯

发布时间：2024年01月10日

使用HTML+CSS+Javascript 制作——当鼠标点击屏幕时，出现星星闪烁的效果

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<script>
			document.body.style.backgroundColor = "#000"
			document.onclick = function(event){
				let img = document.createElement("img")
				img.src = "0.gif"
				img.style.position = "absolute"
				document.body.appendChild(img)
				img.onload = function(){
					const img_w = parseInt(getComputedStyle(img).width)
					const img_h = parseInt(getComputedStyle(img).height)
					
					w = getRandom(50, 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>

?实现效果：

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