一、实验要求
当鼠标点击屏幕时，随机出现大大小小的星星闪烁，犹如夜晚的星空
二、实验思路
-
设置图片的大小
-
设置事件（当鼠标点一下，获取一张图片）
-
设置图片的位置
-
设置鼠标的位置和图片的相对位置
-
设置随机大小
三、实验步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const img_w = 254
const 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>四、实验效果
![[Kubernetes]8. K8s使用Helm部署mysql集群(主从数据库集群)](https://img-blog.csdnimg.cn/direct/4857ce5444ba4a3e8b19d2d9d83187ed.png)
