<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>
星星的图片如下图所示
具体效果
代码下载:http://download.csdn.net/download/williamgavin/10217889