要求
(1)新建HTML文件xingxing.html。
(2)效果要求。
每隔一秒在屏幕中随机出现一颗任意大小的星星。用鼠标单击星星时，星星消失。
(3)需要用到知识：
创建元素；设置元素属性或修改元素属性；Math.Random随机函数；为对象添加鼠标单击动作函数(可以通过设置属性方式添加)；窗口的定时器方法setTimeout()等。
效果
素材
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>消失的星星</title>
<script type="text/javascript">
//定义星星的x、y坐标的最大值和最小值
var y_top = 0;
var y_bottom = 0;
var x_left = 0;
var x_right =0;
//设置星星最大和最小宽度
var img_width_max=80;
var img_width_min =10;
function init(){//获取满天星
//设置网页背景色
document.body.bgColor="#000";
//获取星星在可视区域的最大的宽度和高度
x_right =window.innerWidth-img_width_max;
y_bottom =window.innerHeight-img_width_max;
//定时器：每1秒执行1次
setInterval("start()",1000);
}
function start(){//随机输出星星
//创建img节点
var node_img = document.createElement("img");
//在body中增加img标签
document.body.appendChild(node_img);
//为img节点增加src属性，并赋值
node_img.setAttribute("src","images/xx02.png");//星星图片
//随机获取星星的宽度
var width = getRandom(img_width_max,img_width_min);
//随机获取星星在可视区域的x和y坐标
var x = getRandom(x_left,x_right);
var y = getRandom(y_top,y_bottom);
//为星星设计css样式
var str = "position:absolute;width:"+width+"px;top:"+y+"px;left:"+x+"px;";
node_img.setAttribute("style",str);
node_img.setAttribute("onclick","removeImg(this)");//当点击星星时，星星消失
}
function getRandom(max1,min1){//随机获取数值
return Math.floor(Math.random()*(max1 - min1)+min1);
}
function removeImg(obj){//消星星
document.body.removeChild(obj) ;
}
</script>
</head>
<body onload="init()">
</body>
</html>
