实例:随机显示小星星
(1) 网页背景色为黑色
(2)创建图片节点,追加到body父节点。
(3)图片随机大小
(4)图片的随机定位坐标(x,y)
(5)定时器
(6)网页加载完成,星星开始显示
(7)确定星星显示的范围,跟window的宽高一样
(8)单击星星,星星消失
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
position: relative;
}
img{
position: absolute;
}
</style>
<body>
<img src="./3.jpg" alt="">
<script type="text/javascript">
document.onclick=function(e){
console.log("点击了屏幕",e.clientX,e.clientY)
let start = document.createElement("img");
start.setAttribute("src","./love.png");
let width = parseInt(Math.random()*30)+30
start.style.width = width+"px";
start.style.height = width+"px";
start.style.left =e.clientX-(width/2)+"px";
start.style.top =e.clientY-(width/2)+"px";
document.body.appendChild(start);
setTimeout(function(){
start.remove()
},2000)
}
</script>
</body>
</html>
效果如下