JavaScript實例--實現(xiàn)計算器
更新時間：2022年01月26日 16:56:27 作者：程序員云錦?
這篇文章主要介紹了JavaScript實現(xiàn)計算器，下面文章實現(xiàn)計算器作為學習期間的一個小練習，需要的小伙伴可以參考一下，希望對你有所幫助
一、實例代碼
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"> ?? ??? ?<h1>計算器</h1> ?? ??? ?<a 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;/*寬度*/
}
h1 {/*修改標題樣式*/
?? ?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 {/*定義表單區(qū)域的樣式*/
?? ?background-color: #495678;/*背景顏色*/
?? ?box-shadow: 4px 4px #3d4a65;/*陰影*/
?? ?margin: 40px auto;/*定義外邊距*/
?? ?padding: 40px 0 30px 40px;?? ?/*定義內邊距*/
?? ?width: 280px;/*寬度*/
?? ?/*高度由內容撐起*/
}
.btn {/*定義每個數(shù)字按鈕的格式*/
?? ?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 {/*按鈕，文本輸入框和整個表單區(qū)域*/
?? ?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 {/*定義數(shù)字的按鈕*/
?? ?background-color: #72778b;/*背景顏色*/
?? ?box-shadow: 0 5px #5f6680;/*陰影*/
?? ?color: #dededc;/*數(shù)字顏色*/
}
.number:active {/*選中數(shù)字樣式，就是點擊數(shù)字的動態(tài)效果*/
?? ?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 {/*定義運算符點擊時*/
?? ?/*這個比數(shù)字點擊多了一個，就是把下面的陰影減少了一點*/
?? ?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);
?? ??? ?};二、實例演示
頁面加載后，顯示一個計算器的頁面，可以進行正常的四則運算
運算結果：
也可以歸零，加小數(shù)等等操作
三、實例剖析
方法解析
document.getElementById("display").value = eval(result);eval() 函數(shù)計算 JavaScript 字符串，并把它作為腳本代碼來執(zhí)行。
如果參數(shù)是一個表達式，eval() 函數(shù)將執(zhí)行表達式。如果參數(shù)是Javascript語句，eval()將執(zhí)行 Javascript 語句。
實例執(zhí)行原理解析：
document.getElementById("clear").addEventListener("click", function() {
?? ??? ??? ?document.getElementById("display").value = "";
});監(jiān)聽歸零鍵的click操作，點擊則歸零鍵則執(zhí)行代碼把display輸入框清空
function get(value) {
?? ??? ??? ?document.getElementById("display").value += value;?
}?每個鍵上onclick屬性綁定函數(shù)get()，點擊相應鍵則把相應鍵的值添加到display輸入框中，直接做字符串的追加
function calculates() {
?? ??? ??? ?var result = 0;
?? ??? ??? ?result = document.getElementById("display").value;
?? ??? ??? ?document.getElementById("display").value = "";
?? ??? ??? ?document.getElementById("display").value = eval(result);
};核心計算函數(shù)，首先獲取輸入框display的字符串，然后清空輸入框，調用eval()函數(shù)計算表達式的值后再賦給輸入框display，實現(xiàn)計算器的簡易功能
到此這篇關于JavaScript實例--實現(xiàn)計算器的文章就介紹到這了,更多相關JavaScript實現(xiàn)計算器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JS數(shù)組實現(xiàn)分類統(tǒng)計實例代碼
本文通過實例代碼給大家介紹了js數(shù)組實現(xiàn)分類統(tǒng)計的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章給大家分享了JavaScript實現(xiàn)添加給定的標簽選項的相關知識點內容以及代碼實例，有興趣的朋友們參考下。2018-09-09
JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法
本文給大家簡單總結了下JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法，非常的簡單實用，有需要的小伙伴可以參考下2016-06-06
這篇文章主要介紹了360doc網站不登錄就無法復制內容的解決方法,需要的朋友可以參考下2018-01-01
下面小編就為大家?guī)硪黄猤ulp教程_從入門到項目中快速上手使用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下2015-07-07
大家都知道JS在很多情況下會進行強制類型轉換，最常見的方式有兩種，在文章均給大家提到，下面小編給大家?guī)砹薐S在if中的強制類型轉換，感興趣的朋友一起看看吧2018-07-07
這篇文章主要介紹了SublimeText自帶格式化代碼功能之reindent的相關資料,需要的朋友可以參考下2015-12-12
用JavaScript動態(tài)建立或增加CSS樣式表的實現(xiàn)方法
下面小編就為大家?guī)硪黄肑avaScript動態(tài)建立或增加CSS樣式表的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本文介紹了Date對象的使用方法，清晰明了，實現(xiàn)方法有多種，僅供大家參考，希望對大家有所幫助，下面就跟小編一起來看看吧2016-11-11