JSで実現したランダム表示画像

12265 ワード

 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 2 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 6 <title>       title>
 7 <script type="text/javascript">
 8 //       :
 9 /*        
10     1,        
11     2,      ,      
12     3,      
13     4,      
14     5,   
15     6,      ,    
16     7,       ,        .(0,window.innerWidth)
17     8,    ,    
18 */
19 //             
20 window.onload=function(){
21 //       
22 document.body.bgColor="#000"
23 //                   star  
24 window.setInterval("star()",1000);
25 }
26 //     
27 function star(){
28     //      
29     var imgObj = document.createElement("img");
30     //  src  
31     imgObj.setAttribute("src","images/lele.jpg");
32     //  width   getRandom()     
33     var width = getRandom(20,120);
34     imgObj.setAttribute("width",width);
35 
36     //         (style        )
37     var x = getRandom(0,window.innerWidth);
38     var y = getRandom(0,window.innerHeight);
39     //     x y     
40     imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
41     
42     //  onclick    
43     //this       ,this     ,        
44     imgObj.setAttribute("onclick","removeImg(this)");
45     //     ,        
46     document.body.appendChild(imgObj);
47 }
48 
49 //  :      
50 function getRandom(min,max){
51     var random = Math.random()*(max-min)+min;
52     //    
53     random = Math.floor(random);
54     //    
55     return random;
56 
57 }
58 //  :    
59 function removeImg(obj){
60     document.body.removeChild(obj);
61     
62 }
63 script>
64 
65 <style type="text/css">
66 
67 style>
68 
69 head>
70 <body>
71 
72 
73 body>
74 html>
 
転載先:https://www.cnblogs.com/CAODADA/p/6132486.html