改进的面积计算
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="utf-8">
5 <title>7-64 课堂演示</title>
6 <link rel="stylesheet" type="text/css" href="style.css">
7 <style type="text/css">
8 div{
9 margin: 15px auto;
10 background: orange;
11 width: 300px;
12 height: 240px;
13 text-align: center;
14 padding: 15px;
15 }
16 input{
17 margin: 10px 10px;
18 padding: 5px;
19 }
20 </style>
21 </head>
22 <body>
23 <div>
24 <h3>计算圆的面积</h3>
25 <label for="radius">半径:</label>
26 <input type="text" id="radius" ><br>
27 <label for="area">面积:</label>
28 <input type="text" id="area" ><br><br>
29 <input type="button" id="js" value="计算" onclick="show()">
30 <input type="button" id="cl" value="清空" onclick="cl()">
31 </div>
32 <script>
33 function carea(r){
34 var s=Math.PI*r*r;
35 return s;
36 }
37
38 function show(){
39 var radius=document.getElementById('radius').value;
40 var area=carea(radius);
41
42 document.getElementById('area').value=area
43 }
44
45 function cl(){
46 document.getElementById('radius').value=''
47 document.getElementById('area').value=''
48 }
49 </script>
50 </body>
51 </html>
