1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>满天小星星</title>
6 <meta name="keywords" content="关键字列表" />
7 <meta name="description" content="网页描述" />
8 <link rel="stylesheet" type="text/css" href="" />
9 <style type="text/css"></style>
10 <script type="text/javascript">
11
12 window.onload = function(){
13 //1.要开启定时器
14 setInterval("createImg()",4000);
15 }
16
17 //表示图片的最大与最小值
18 var img_min_width = 15;
19 var img_max_width = 90;
20 //控制图片出现的范围
21 var x_left = 0;
22 var x_right = window.innerWidth-img_max_width;
23 var y_top = 0;
24 var y_bottom = window.innerHeight-img_max_width;
25
26
27 //定时器函数
28 function createImg(){
29 //2.创建图片标签对象
30 var img_node = document.createElement("img");
31 // 然后给这个标签对象添加src属性
32 img_node.setAttribute("src","images/xingxing.gif");
33 //并且把创建好的img标签追加到body标签里面去
34 document.body.appendChild(img_node);
35 //图片大小随机出现
36 img_node.setAttribute("width",getRandom(img_max_width,img_min_width));
37 //4图片出现的位置也是进行随机出现！
38 var x = getRandom(x_right,x_left);
39 var y = getRandom(y_bottom,y_top);
40 img_node.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
41 //5、当鼠标点击当前的这个星星时 就将当前这个星星移除掉
42 img_node.setAttribute("onclick","removeImg(this)");
43 }
44
45 function getRandom(max,min){
46 return Math.floor(Math.random()*(max-min+1)+min);
47 }
48
49
50 //这个函数的功能是要移除当前的星星 其实就是将img这个标签删除掉
51 function removeImg(obj){
52 //当前要移除的标签对象的父元素.removeChild(要移除的标签对象)
53 obj.parentNode.removeChild(obj);
54 }
55
56 </script>
57 </head>
58 <body>
59
60 </body>
61 </html>
效果图:
时间： 2024-08-11 05:33:51