js动画

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js动画</title>
 6     <style type="text/css">
 7         .box {
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             transition: .3s;
12         }
13         .box.r {
14             border-radius: 50%;
15         }
16         .box.h {
17             height: 400px;
18         }
19     </style>
20 </head>
21 <body>
22     <button class="btn1">变长</button>
23     <button class="btn2">切换宽度</button>
24     <button class="btn3">切换边界圆角</button>
25     <button class="btn4">切换高度</button>
26     <button class="btn5">变短</button>
27     <div class="box"></div>
28 </body>
29 <script type="text/javascript">
30     var box = document.querySelector('.box');
31     var b1 = document.querySelector('.btn1');
32     b1.onclick = function () {
33         box.style.width = "400px";
34     }
35     var b5 = document.querySelector('.btn5');
36     b5.onclick = function () {
37         box.style.width = "200px";
38         // console.log(box.style.width);
39     }
40 
41     var b2 = document.querySelector('.btn2');
42     var b3 = document.querySelector('.btn3');
43     var b4 = document.querySelector('.btn4');
44 
45     b2.onclick = function () {
46         var width = getComputedStyle(box, null).width;
47         if (width.match("200px")) {
48             box.style.width = "400px";
49         } else {
50             box.style.width = "200px";
51         }
52     }
53 
54     b3.onclick = function () {
55         var c_name = box.className;
56         console.log(c_name);
57         // 可能是'box' | 'box h' | 'box r' | 'box h r'
58 
59         // if (c_name == 'box') {
60         if (!c_name.match("r")) {
61             box.className += " r";
62         } else {
63             // 不是直接切回box
64             // box.className = "box";
65             // 而且去掉r
66             box.className = c_name.replace(" r", "");
67         }
68     }
69 
70     b4.onclick = function () {
71         var c_name = box.className;
72         // 没有h类名, 单独添加h类名,反之去除h类名
73         if (!c_name.match("h")) {
74             box.className += " h";
75         } else {
76             box.className = c_name.replace(" h", "");
77         }
78     }
79 
80 
81 </script>
82 </html>