信鸽网

javascript实现随机显示星星特效

  作者：bea

本文实例讲解了javascript实现随机显示星星特效的详细代码，具体内容如下 （1）网页背景是黑的 （2）星星随机大小：min=15,max=80 （3）星星的坐标是随机的： x_left=0,x_right=(浏览器宽-星星宽) y_top=0,y_bottom=? （4）单击某个星星，星星消失 （5）网页加载完成，开始显示星星 （6）定时器：每隔一个周期，插入一个星星 <html><head><meta

本文实例讲解了javascript实现随机显示星星特效的详细代码，具体内容如下



  • （1）网页背景是黑的 

  • （2）星星随机大小：min=15,max=80 

  • （3）星星的坐标是随机的：

  •               x_left=0,x_right=(浏览器宽-星星宽)

  •               y_top=0,y_bottom=?

  • （4）单击某个星星，星星消失

  • （5）网页加载完成，开始显示星星

  • （6）定时器：每隔一个周期，插入一个星星




<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

//定义全局变量

var img_width_min = 15;

var img_width_max = 80;

var x_left = 0;

var x_right = 0;

var y_top = 0;

var y_bottom = 0;



//定义初始化的函数

function init()

{

 document.body.bgColor = "#000";

 x_right = window.innerWidth - img_width_max;

 y_bottom = window.innerHeight - img_width_max;

 //定时器

 setInterval("showStar()",1000);

}

//显示星星

function showStar()

{

 //创建一个图片

 var node_img = document.createElement("img");

 //随机图片大小和随机坐标

 var width = getRandom(img_width_min,img_width_max);

 var x = getRandom(x_left,x_right);

 var y = getRandom(y_top,y_bottom);

 //增加src的属性

 node_img.setAttribute("src","images/xingxing.gif");

 //增加style属性

 var style = "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);

}

function removeImg(obj)

{

 document.body.removeChild(obj);

}

function getRandom(min,max)

{

 return Math.floor(Math.random()*(max-min)+min);

}

</script>

</head>



<body onload="init()">

</body>

</html>


希望本文所述对大家的javascript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: