一、实验要求
当鼠标点击屏幕时，随机出现大大小小的星星闪烁，犹如夜晚的星空
二、实验思路
-
设置图片的大小
-
设置事件（当鼠标点一下，获取一张图片）
-
设置图片的位置
-
设置鼠标的位置和图片的相对位置
-
设置随机大小
三、实验步骤
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>const img_w = 254const img_h = 218// 这里将背景设置为黑色看起来更明显document.body.style.backgroundColor = " #000" window.onload = function() {document.onclick = function(event){let img = document.createElement("img")img.src = "./0.gif" //这里插入图片img.style.position = "absolute"w = getRandom(20, 200)img.style.width = w + "px"h = w * img_h / img_w //这里等比例缩放img.style.height = h + "px"//图片出现的位置就是鼠标点击的位置img.style.left = (event.pageX - w / 2) + "px" img.style.top = (event.pageY - h / 2) + "px"document.body.appendChild(img)}
}function getRandom(min, max) { //这个函数是图片产生随机的大小return min + Math.ceil((max - min) * Math.random())}</script></body>
</html>四、实验效果
