<!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>計(jì)算器</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;/*去除默認(rèn)邊框*/
?? ?font-family: 'Open Sans', sans-serif;/*更改字體*/
?? ?margin: 0;/*去除默認(rèn)外邊距*/
?? ?padding: 0;/*去除默認(rèn)內(nèi)邊距*/
}

?.center {
?? ?background-color: #fff;
?? ?border-radius: 50%;/*圓角*/
?? ?height: 600px;/*計(jì)算器總高度*/
?? ?margin: auto;/*水平居中*/
?? ?width: 600px;/*寬度*/
}

h1 {/*修改標(biāo)題樣式*/
?? ?color: #495678;/*字體顏色*/
?? ?font-size: 30px;?? ?/*字體大小*/
?? ?margin-top: 20px;/*頂部外邊距*/
?? ?padding-top: 50px;/*頂部?jī)?nèi)邊距*/
?? ?display: block;/*修改為塊級(jí)元素，獨(dú)占一行*/
?? ?text-align: center;/*文字居中*/
?? ?text-decoration: none;/*去除默認(rèn)文字樣式*/
}

a {/*這是標(biāo)題下面一塊位置，點(diǎn)擊可以跳轉(zhuǎn)到github的倉(cāng)庫(kù)地址*/
?? ?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;?? ?/*定義內(nèi)邊距*/
?? ?width: 280px;/*寬度*/
?? ?/*高度由內(nèi)容撐起*/
}

.btn {/*定義每個(gè)數(shù)字按鈕的格式*/
?? ?outline: none;/*清除默認(rèn)邊框樣式*/
?? ?cursor: pointer;/*定義鼠標(biāo)移上時(shí)變成手的圖案，使用戶知道可點(diǎn)擊*/
?? ?font-size: 20px;/*字體大小*/
?? ?height: 45px;/*按鈕高度*/
?? ?margin: 5px 0 5px 10px;/*外邊距*/
?? ?width: 45px;/*按鈕寬度*/
}

.btn:first-child {
?? ?margin: 5px 0 5px 10px;/*第一個(gè)按鈕特殊*/
}


.btn, #display, form {/*按鈕，文本輸入框和整個(gè)表單區(qū)域*/
?? ?border-radius: 25px;/*圓角*/
}

/*定義輸入框*/
#display {
?? ?outline: none;/*清除默認(rèn)邊框樣式*/
?? ?background-color: #98d1dc;/*背景顏色*/
?? ?box-shadow: inset 6px 6px 0px #3facc0;/*陰影*/
?? ?color: #dededc;/*內(nèi)部文本顏色*/
?? ?font-size: 20px;/*文本大小*/
?? ?height: 47px;/*輸入框高度*/
?? ?text-align: right;/*文本右對(duì)齊*/
?? ?width: 165px;/*定義寬度*/
?? ?padding-right: 10px;/*右內(nèi)邊距*/
?? ?margin-left: 10px;/*左外邊距*/
}


.number {/*定義數(shù)字的按鈕*/
?? ?background-color: #72778b;/*背景顏色*/
?? ?box-shadow: 0 5px #5f6680;/*陰影*/
?? ?color: #dededc;/*數(shù)字顏色*/
}


.number:active {/*選中數(shù)字樣式，就是點(diǎn)擊數(shù)字的動(dòng)態(tài)效果*/
?? ?box-shadow: 0 2px #5f6680;

? ?? ?-webkit-transform: translateY(2px);
? ?? ?-ms-transform: translateY(2px);
? ?? ?-moz-tranform: translateY(2px);
? ?? ?transform: translateY(2px);
?? ??? ?/*這四個(gè)其實(shí)是一樣的，這是為了兼容不同的瀏覽器，效果就是向上移動(dòng)2px距離
?? ??? ?需要配合js，點(diǎn)擊時(shí)賦active，點(diǎn)擊后抹掉
?? ??? ?*/
}

.operator {/*定義運(yùn)算符按鈕*/
?? ?background-color: #dededc;/*背景顏色*/
?? ?box-shadow: 0 5px #bebebe;/*陰影*/
?? ?color: #72778b;/*運(yùn)算符顏色*/
}


.operator:active {/*定義運(yùn)算符點(diǎn)擊時(shí)*/
?? ?/*這個(gè)比數(shù)字點(diǎn)擊多了一個(gè)，就是把下面的陰影減少了一點(diǎn)*/
?? ?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;/*符號(hào)顏色*/
}


.other:active {/*點(diǎn)擊效果和點(diǎn)擊運(yùn)算符一樣*/
?? ?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í)例演示

頁(yè)面加載后，顯示一個(gè)計(jì)算器的頁(yè)面，可以進(jìn)行正常的四則運(yùn)算

運(yùn)算結(jié)果：

也可以歸零，加小數(shù)等等操作

三、實(shí)例剖析

方法解析

document.getElementById("display").value = eval(result);

eval() 函數(shù)計(jì)算 JavaScript 字符串，并把它作為腳本代碼來(lái)執(zhí)行。
如果參數(shù)是一個(gè)表達(dá)式，eval() 函數(shù)將執(zhí)行表達(dá)式。如果參數(shù)是Javascript語(yǔ)句，eval()將執(zhí)行 Javascript 語(yǔ)句。

實(shí)例執(zhí)行原理解析：

document.getElementById("clear").addEventListener("click", function() {
?? ??? ??? ?document.getElementById("display").value = "";
});

監(jiān)聽(tīng)歸零鍵的click操作，點(diǎn)擊則歸零鍵則執(zhí)行代碼把display輸入框清空

function get(value) {
?? ??? ??? ?document.getElementById("display").value += value;?
}?

每個(gè)鍵上onclick屬性綁定函數(shù)get()，點(diǎn)擊相應(yīng)鍵則把相應(yīng)鍵的值添加到display輸入框中，直接做字符串的追加

function calculates() {
?? ??? ??? ?var result = 0;
?? ??? ??? ?result = document.getElementById("display").value;
?? ??? ??? ?document.getElementById("display").value = "";
?? ??? ??? ?document.getElementById("display").value = eval(result);
};

核心計(jì)算函數(shù)，首先獲取輸入框display的字符串，然后清空輸入框，調(diào)用eval()函數(shù)計(jì)算表達(dá)式的值后再賦給輸入框display，實(shí)現(xiàn)計(jì)算器的簡(jiǎn)易功能

到此這篇關(guān)于JavaScript實(shí)例--實(shí)現(xiàn)計(jì)算器的文章就介紹到這了,更多相關(guān)JavaScript實(shí)現(xiàn)計(jì)算器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: