當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
[JavaScript实例解析]js计算器
生活随笔
收集整理的這篇文章主要介紹了
[JavaScript实例解析]js计算器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本實例來自菜鳥教程
實例代碼
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://github.com/guuibayer/simple-calculator" 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 {/*定義表單區域的樣式*/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，實現計算器的簡易功能
計算器的CSS代碼在上面已經由注釋解析了
總結
以上是生活随笔為你收集整理的[JavaScript实例解析]js计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript实现简单计算器
- 下一篇： javascript实现计算器