码迷,mamicode.com
首页 > Web开发 > 详细

JS对象实现随机满天小星星实例

时间:2016-12-13 07:23:08      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:ack   并且   exp   定时   absolute   sheet   height   关键字   随机   

技术分享
 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>
View Code

效果图:

技术分享

 

JS对象实现随机满天小星星实例

标签:ack   并且   exp   定时   absolute   sheet   height   关键字   随机   

原文地址:http://www.cnblogs.com/ChenGuoW/p/6166417.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!