Javascript implémente les compétences d'effets d'affichage d'étoiles aléatoires

Javascript implémente les compétences d'effets d'affichage d'étoiles aléatoires_javascript

WBOY

Libérer： 2016-05-16 15:17:27

original

1860 Les gens l'ont consulté

L'exemple de cet article explique le code détaillé de javascript pour implémenter des effets d'affichage d'étoiles aléatoires. Le contenu spécifique est le suivant

(1) Le fond de la page Web est noir
(2) Taille aléatoire des étoiles : min=15, max=80
(3) Les coordonnées des étoiles sont aléatoires :
x_left=0,x_right=(largeur du navigateur-largeur des étoiles)
y_top=0,y_bottom=?
(4) Cliquez sur une étoile et l'étoile disparaît
(5) La page Web est chargée et les étoiles commencent à s'afficher
(6) Minuterie : insérez une étoile tous les deux cycles

<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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.