DOM编程实例2-更改样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             body{
 8                 background-image: url(img/bjsky.jpg);
 9                 background-repeat: no-repeat;
10                 background-size: 1600px 800px;
11             }
12             a{
13                 font-size: 25px;
14                 color: white;
15             }
16             
17             .div1{
18                  300px;
19                 height: 200px;
20                 background-color: gray;
21                 text-align: center;
22             }
23             
24             input{
25                  40px;
26                 height:30px;    
27             }
28         </style>
29         <script type="text/javascript">
30             var i = -1;
31             function changebg(){
32                 var arr= ["bjsky.jpg","mayun.jpg","simple.jpg","sxt.jpg","zgc.jpg"];
33                 if (i<arr.length-1){
34                     i++;
35                 }else{
36                     i = 0;
37                 }
38                 
39                 document.body.style.backgroundImage = "url(img/"+arr[i]+")";
40             }
41             
42             function move(){
43                 var div = document.getElementById("div_1");
44                 div.style.marginTop = Math.random()*500+"px";
45                 div.style.marginLeft= Math.random()*800+"px";
46             }
47             
48             function changeclk(){
49                 document.body.style.backgroundImage = "url(img/1.jpg)";
50                 document.getElementById("div_1").style.display = "none";
51             }
52         </script>
53         
54         
55     </head>
56     <body>
57         <a href="javascript:changebg()">点击更换背景图片</a>
58         
59         <div class="div1" id="div_1">
60             <h3>我是不是很帅</h3>
61             <input type="button" name="" id="" value="是" onclick="changeclk()"/>
62             <input type="button" name="" id="" value="否" onmousemove="move()"/>
63         </div>
64     </body>
65 </html>