JS對象實現隨機滿天小星星實例

時間 2019-11-29

原文原文鏈接

 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              //五、當鼠標點擊當前的這個星星時 就將當前這個星星移除掉
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>

View Code

效果圖:javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。