web前端案例之星星点灯_web前端点击某个按钮小灯发光

作者：煮酒与君饮 | 2024-07-10 05:50:33

踩

web前端点击某个按钮小灯发光

使用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>

实现效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/805012