本文介绍了如何通过HTML和JavaScript编写代码，在用户点击页面时在随机位置显示动态闪烁的星星图片，实现星星点灯的效果。
一、实验题目
用html实现星星点灯效果
二、实验代码
<!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 = "../pic/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>三、实验效果
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
