JavaScript例項--實現計算器
阿新 • • 發佈：2022-01-21
目錄
- 一、例項程式碼
- 二、例項演示
- 三、例項剖析
一、例項程式碼
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 href="https://.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 ：
* {
border: none;/*去除預設邊框*/
font-family: 'Open Sans',sans-serif;/*更改字型*/
margin: 0;/*去除預設外邊距*/
padding: 0;/*去除預設內邊距*/
}
.center {
background-color: #fff;
border-radius: 50%;/*圓角*/
height: 600px;/*計算器總高度*/
margin: auto;/*http://www.cppcns.com水平居中*/
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 {/*定義表單區域的樣式*/
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距離
需要配合，點選時賦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-trhttp://www.cppcns.com
：
/* 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() 函式計算 Script 字串，並把它作為程式碼來執行。
如果引數是一個表示式，eval() 函式將執行表示式。如果引數是Javascript語句，eval()將執行 Javascript 語句。
例項執行原理解析：
document.getElementById("clear").addEventListener("click",function() {
document.getElementById("display").value = "";
});http://www.cppcns.com
監聽歸零鍵的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);
};
核心計算http://www.cppcns.com函式，首先獲取輸入框display的字串，然後清空輸入框，呼叫eval()函式計算表示式的值後再賦給輸入框display，實現計算器的簡易功能
到此這篇關於JavaScript例項--實現計算器的文章就介紹到這了,更多相關JavaScript實現計算器內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！