用JavaScript做一個簡單的計算器

Posted zzzzzpaul

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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>

 

以上是关于用JavaScript做一個簡單的計算器的主要内容,如果未能解决你的问题,请参考以下文章

給出一個數,倒序輸出它,符號也要考慮,使用整除10和對10的模運算很方便,同時也知道了越界的計算方法

老男孩老師課程學習筆記----ip端口協議 簡單敘述

ORACLE遞歸查詢

利用imagemagick來作縮圖

JavaScript 設計模型 - Iterator

基於tiny4412的Linux內核移植--- 中斷和GPIO學習