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>