JavaScript制作消失的小星星

素材

效果图：

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>消失的星星</title>
<script language="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/xingxing.gif");

//随机获取星星的宽度
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>

posted on 2018-11-27 14:06 紫陌纤芳阅读(717) 评论(0) 收藏举报