用JavaScript做一個簡單的計算器
今天繼續學習JavaScript，視頻講的確實挺差勁的。還是只能跟著W3School自己慢慢摸索著弄了。自己百度了一下，參考了一個大佬寫的一個簡單的計算器代碼。代碼能跑通，但是做出來的樣子實在是感覺太丑了。做完以後自己又把樣式重新寫了一遍。結果就變成這樣的了。下面就是今天的代碼：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JSNote1</title> 6 <style> 7 body{ 8 margin: 10%; 9 padding: 2%; 10 } 11 .tab1{ 12 margin-left: 20%; 13 margin-right: 20; 14 width: 60%; 15 padding: 2%; 16 color: #00F84A; 17 background-color: #1D3F39; 18 text-align: center; 19 border: 2px solid #0200FF; 20 border-radius: 25px; 21 box-shadow: 2px 2px 0 3px #424242; 22 } 23 .tabbt1{ 24 width: 50px; 25 height: 50px; 26 border-radius: 50%; 27 color: #00FF8C; 28 background-color: #673ECB; 29 font-size: 25px; 30 } 31 th,td,tr{ 32 width: 25%; 33 } 34 .input1{ 35 margin: 1%; 36 padding: 3%; 37 width: 80%; 38 font-size: 20px; 39 color: #FF1801; 40 border-radius: 5px; 41 box-shadow: 1px 1px 0 2px #424242; 42 } 43 </style> 44 </head> 45 <body> 46 <p>用JS做一個簡單的網頁計算器</p> 47 <!-- 48 需求,做一個可以輸入兩個數值,讓這兩個數值可以做四則運算的計算器 49 步驟,1,做script方法 50 2,做一個表格 51 3,設計表格樣式 52 4,用表格内的元素調用script中的方法 53 --> 54 <script> 55 // 定義相加的方法 56 function sum(){ 57 // 獲取第一個表格數值,默認值為0 58 var def1 = 0; 59 n1 = Number(document.getElementById("tab1").value); 60 // 獲取第二個表格數值,默認值為0 61 var def2 = 0; 62 n2 = Number(document.getElementById("tab2").value); 63 // 定義加法 64 sum = n1+n2; 65 // 將結果輸出,用一個變量result接收 66 document.getElementById("result").value=sum; 67 } 68 // 定義相減的方法 69 function minus(){ 70 var min=0; 71 min=n1-n2; 72 document.getElementById("result").value=min; 73 } 74 // 定義乘法 75 function multiply(){ 76 var mul=0; 77 mul=n1*n2; 78 document.getElementById("result").value=mul; 79 } 80 // 定義除法 81 function division(){ 82 var divi=0; 83 divi=n1/n2; 84 document.getElementById("result").value=divi; 85 } 86 </script> 87 <table class="tab1"> 88 <tr> 89 <th colspan="4">這是一個JS代碼寫的計算器</th> 90 </tr> 91 <tr> 92 <td colspan="4"><input type="text" placeholder="請輸入第一個數字" id="tab1" class="input1"></td> 93 </tr> 94 <tr> 95 <td colspan="4"><input type="text" placeholder="請輸入第二個數字" id="tab2" class="input1"></td> 96 </tr> 97 <tr> 98 <td><input type="submit" value="+" onClick="sum()" class="tabbt1"></td> 99 <td><input type="submit" value="-" onClick="minus()" class="tabbt1"></td> 100 <td><input type="submit" value="*" onClick="multiply()" class="tabbt1"></td> 101 <td><input type="submit" value="/" onClick="division()" class="tabbt1"></td> 102 </tr> 103 <tr> 104 <td>Result結果</td> 105 <td colspan="3"><input type="text" id="result" class="input1"></td> 106 </tr> 107 </table> 108 </body> 109 </html>
