Show small stars randomly

<html>
<head>
    <title>随机显示小星星</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*
实例：随机显示小星星
    （1） 网页背景色为黑色
    （2）创建图片节点，追加到body父节点。
    （3）图片随机大小
    （4）图片的随机定位坐标（x，y）
    （5）定时器
    （6）网页加载完成，星星开始显示
    （7）确定星星显示的范围，跟window的宽高一样
    （8）单击星星，星星消失
*/
// 网页加载完成
window.onload = init;
function init()
{
    // 网页背景色
    document.body.bgColor = "#000";
    // 定时器：1s显示一个星星
    window.setInterval("star()",1000);

}
// 动画主函数
function star()
{
    //创建星星节点
    var imgObj = document.createElement("img");

    // 添加src属性
    imgObj.setAttribute("src", "images/xingxing.gif");
    // 添加width
    var width = getRandom(15, 85);
    imgObj.setAttribute("width", width);
    // 添加style属性（行内样式）
    var x = getRandom(0,window.innerWidth);
    var y = getRandom(0, window.innerHeight);
    imgObj.setAttribute("style", "position:absolute;left:"+x+"px; top:" + y + "px;");
    // 将图片节点，挂再父节点下
    document.body.appendChild(imgObj);
    // 单击星星， 星星消失
    // this 代表当前对象，this只能在函数内使用
    imgObj.setAttribute("onClick", "missStar(this)");
}
// 星星消失
function missStar(obj)
{
    document.body.removeChild(obj);
}
// 求随机数
function getRandom(min, max)
{
    var random = Math.random()*(max-min)+min;
    random = Math.floor(random);
    return random;
}
</script>
</head>


<body>
</body>
</html>

The picture of the star is shown below

write picture description here

specific effect
write picture description here

Code download: http://download.csdn.net/download/williamgavin/10217889

Show small stars randomly

Guess you like