這篇文章主要為大家展示了“JavaScript如何實現計算器”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript如何實現計算器”這篇文章吧。
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Basic Reset */ </style> </head> <body> <div class="center"> <h2>計算器</h2> <a href="https://github.com/guuibayer/simple-calculator" rel="external nofollow" target="_blank"><i class="fa fa-github"></i></a> <form name="calculator"> <input type="button" id="clear" class="btn other" value="C"> <input type="text" id="display"> <br> <input type="button" class="btn number" value="7" onclick="get(this.value);"> <input type="button" class="btn number" value="8" onclick="get(this.value);"> <input type="button" class="btn number" value="9" onclick="get(this.value);"> <input type="button" class="btn operator" value="+" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="4" onclick="get(this.value);"> <input type="button" class="btn number" value="5" onclick="get(this.value);"> <input type="button" class="btn number" value="6" onclick="get(this.value);"> <input type="button" class="btn operator" value="*" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="1" onclick="get(this.value);"> <input type="button" class="btn number" value="2" onclick="get(this.value);"> <input type="button" class="btn number" value="3" onclick="get(this.value);"> <input type="button" class="btn operator" value="-" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="0" onclick="get(this.value);"> <input type="button" class="btn operator" value="." onclick="get(this.value);"> <input type="button" class="btn operator" value="/" onclick="get(this.value);"> <input type="button" class="btn other" value="=" onclick="calculates();"> </form> </div> <script> </script> </body> </html>
CSS：
* {
border: none;/*去除默認邊框*/
font-family: 'Open Sans', sans-serif;/*更改字體*/
margin: 0;/*去除默認外邊距*/
padding: 0;/*去除默認內邊距*/
}
.center {
background-color: #fff;
border-radius: 50%;/*圓角*/
height: 600px;/*計算器總高度*/
margin: auto;/*水平居中*/
width: 600px;/*寬度*/
}
h2 {/*修改標題樣式*/
color: #495678;/*字體顏色*/
font-size: 30px; /*字體大小*/
margin-top: 20px;/*頂部外邊距*/
padding-top: 50px;/*頂部內邊距*/
display: block;/*修改為塊級元素，獨占一行*/
text-align: center;/*文字居中*/
text-decoration: none;/*去除默認文字樣式*/
}
a {/*這是標題下面一塊位置，點擊可以跳轉到github的倉庫地址*/
color: #495678;
font-size: 30px;
display: block;
text-align: center;
text-decoration: none;
padding-top: 20px;
}
form {/*定義表單區域的樣式*/
background-color: #495678;/*背景顏色*/
box-shadow: 4px 4px #3d4a65;/*陰影*/
margin: 40px auto;/*定義外邊距*/
padding: 40px 0 30px 40px; /*定義內邊距*/
width: 280px;/*寬度*/
/*高度由內容撐起*/
}
.btn {/*定義每個數字按鈕的格式*/
outline: none;/*清除默認邊框樣式*/
cursor: pointer;/*定義鼠標移上時變成手的圖案，使用戶知道可點擊*/
font-size: 20px;/*字體大小*/
height: 45px;/*按鈕高度*/
margin: 5px 0 5px 10px;/*外邊距*/
width: 45px;/*按鈕寬度*/
}
.btn:first-child {
margin: 5px 0 5px 10px;/*第一個按鈕特殊*/
}
.btn, #display, form {/*按鈕，文本輸入框和整個表單區域*/
border-radius: 25px;/*圓角*/
}
/*定義輸入框*/
#display {
outline: none;/*清除默認邊框樣式*/
background-color: #98d1dc;/*背景顏色*/
box-shadow: inset 6px 6px 0px #3facc0;/*陰影*/
color: #dededc;/*內部文本顏色*/
font-size: 20px;/*文本大小*/
height: 47px;/*輸入框高度*/
text-align: right;/*文本右對齊*/
width: 165px;/*定義寬度*/
padding-right: 10px;/*右內邊距*/
margin-left: 10px;/*左外邊距*/
}
.number {/*定義數字的按鈕*/
background-color: #72778b;/*背景顏色*/
box-shadow: 0 5px #5f6680;/*陰影*/
color: #dededc;/*數字顏色*/
}
.number:active {/*選中數字樣式，就是點擊數字的動態效果*/
box-shadow: 0 2px #5f6680;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
/*這四個其實是一樣的，這是為了兼容不同的瀏覽器，效果就是向上移動2px距離
需要配合js，點擊時賦active，點擊后抹掉
*/
}
.operator {/*定義運算符按鈕*/
background-color: #dededc;/*背景顏色*/
box-shadow: 0 5px #bebebe;/*陰影*/
color: #72778b;/*運算符顏色*/
}
.operator:active {/*定義運算符點擊時*/
/*這個比數字點擊多了一個，就是把下面的陰影減少了一點*/
box-shadow: 0 2px #bebebe;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
.other {/*定義歸零鍵和=鍵*/
background-color: #e3844c;/*背景顏色*/
box-shadow: 0 5px #e76a3d;/*陰影*/
color: #dededc;/*符號顏色*/
}
.other:active {/*點擊效果和點擊運算符一樣*/
box-shadow: 0 2px #e76a3d;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}JavaScript：
/* limpa o display */
document.getElementById("clear").addEventListener("click", function() {
document.getElementById("display").value = "";
});
/* recebe os valores */
function get(value) {
document.getElementById("display").value += value;
}
/* calcula */
function calculates() {
var result = 0;
result = document.getElementById("display").value;
document.getElementById("display").value = "";
document.getElementById("display").value = eval(result);
};頁面加載后，顯示一個計算器的頁面，可以進行正常的四則運算
運算結果：
也可以歸零，加小數等等操作
方法解析
document.getElementById("display").value = eval(result);eval() 函數計算 JavaScript 字符串，并把它作為腳本代碼來執行。
如果參數是一個表達式，eval() 函數將執行表達式。如果參數是Javascript語句，eval()將執行 Javascript 語句。
實例執行原理解析：
document.getElementById("clear").addEventListener("click", function() {
document.getElementById("display").value = "";
});監聽歸零鍵的click操作，點擊則歸零鍵則執行代碼把display輸入框清空
function get(value) {
document.getElementById("display").value += value;
}每個鍵上onclick屬性綁定函數get()，點擊相應鍵則把相應鍵的值添加到display輸入框中，直接做字符串的追加
function calculates() {
var result = 0;
result = document.getElementById("display").value;
document.getElementById("display").value = "";
document.getElementById("display").value = eval(result);
};核心計算函數，首先獲取輸入框display的字符串，然后清空輸入框，調用eval()函數計算表達式的值后再賦給輸入框display，實現計算器的簡易功能
以上是“JavaScript如何實現計算器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
