javascript实现随机显示星星特效
本文实例讲解了javascript实现随机显示星星特效的详细代码，具体内容如下
- （1）网页背景是黑的
- （2）星星随机大小：min=15,max=80
- （3）星星的坐标是随机的：
- x_left=0,x_right=(浏览器宽-星星宽)
- y_top=0,y_bottom=?
- （4）单击某个星星，星星消失
- （5）网页加载完成，开始显示星星
- （6）定时器：每隔一个周期，插入一个星星
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<scripttype="text/javascript">
//定义全局变量
varimg_width_min=15;
varimg_width_max=80;
varx_left=0;
varx_right=0;
vary_top=0;
vary_bottom=0;
//定义初始化的函数
functioninit()
{
document.body.bgColor="#000";
x_right=window.innerWidth-img_width_max;
y_bottom=window.innerHeight-img_width_max;
//定时器
setInterval("showStar()",1000);
}
//显示星星
functionshowStar()
{
//创建一个图片
varnode_img=document.createElement("img");
//随机图片大小和随机坐标
varwidth=getRandom(img_width_min,img_width_max);
varx=getRandom(x_left,x_right);
vary=getRandom(y_top,y_bottom);
//增加src的属性
node_img.setAttribute("src","images/xingxing.gif");
//增加style属性
varstyle="position:absolute;left:"+x+"px;top:"+y+"px;";
style+="width:"+width+"px;";
node_img.setAttribute("style",style);
//增加一个onclick事件属性
node_img.setAttribute("onclick","removeImg(this)");
//将图片追加到<body>元素下
document.body.appendChild(node_img);
}
functionremoveImg(obj)
{
document.body.removeChild(obj);
}
functiongetRandom(min,max)
{
returnMath.floor(Math.random()*(max-min)+min);
}
</script>
</head>
<bodyonload="init()">
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。