html星星点灯
一、实验题目
用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 * wimg.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>三、实验效果
