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)