1.设计思路:
- 通过鼠标点击获取星星出现的位置
- 创建星星这个对象
- 设置星星的属性
- 用匿名函数实现星星在几s后消失
- 设置星星的样式
- 给星星随机宽高使星星随机变化
代码展示;
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>消失的星星</title><style type="text/css">*{margin: 0;padding: 0;}body{position: relative;}img{position: absolute;}</style></head><body><br id="end"><!-- <img src="img/starsel.png" > --><!-- 点击屏幕在鼠标点击位置出现随机大小星星 --><script type="text/javascript">document.onclick=function(e){console.log("点击了屏幕",e.clientX,e.clientY);//1、创建星星let star=document.createElement("img");//2.设置属性star.setAttribute("src","img/starsel.png");// 6、给出随机宽高let width=parseInt(Math.random()*30)+30;star.style.width=width+"px";star.style.height=width+"px";// 5.设置元素样式star.style.left=e.clientX-(width/2)+"px";star.style.top=e.clientY-(width/2)+"px";//3.将创建好的星星插入文档let end=document.getElementById("end");document.body.insertBefore(star,end);// 4.2s以后星星消失setTimeout(function(){star.remove()},10000)}</script></body>
</html>
2.用浏览器打开,按住F12或者鼠标右键检查,鼠标在空白地方可以点击出现星星的位置,设置的是10s后消失,在console里面看鼠标位置。
3.运行结果;