1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *
8 {
9 margin: 0;
10 padding: 0;
11 }
12 #z_d1,#z_d2
13 {
14 width: 300px;
15 height: 300px;
16 background: pink;
17 }
18 </style>
19 </head>
20 <body>
21 <input type="button" value="我是摇摆哥" id="z_inp1">
22 <div id="z_d1"></div>
23 <input type="button" value="+" id="z_inp2">
24 <div id="z_d2"></div>
25
26 <!-- =====================JS========================-->
27 <script>
28 var z_inp1=document.getElementById('z_inp1');
29 var z_d1=document.getElementById('z_d1');
30 var z_inp2=document.getElementById('z_inp2');
31 var z_d2=document.getElementById('z_d2');
32 var a=1,b=0;
33 //左右摇摆
34 z_inp1.onclick=function() {
35 if (a==1) {
36 z_d1.style.marginLeft="10px";
37 a=0;
38 }else{
39 z_d1.style.marginLeft="-10px";
40 a=1;
41 };
42 };
43
44 //无限＋
45 z_inp2.onclick=function(){
46 b+=10;
47 z_d2.style.marginLeft=b+"px";
48 };
49
50 </script>
51 </body>
52 </html>
