用JavaScript寫一個簡單的計算器
阿新 • • 發佈：2018-10-02
res scroll ref 簡單的 精度 arguments alt inf create
本文使用js實現了一個簡單的加、減、乘、除計算器。
以下是css部分代碼：
*{ padding:0; margin:0; color: #424242; } .outer{ width:300px; height:auto; outline:1px solid #b9b9b9; margin:50px auto; background: pink; } .title{ height:40px; width:100%; border-bottom:1px solid #b9b9b9; text-align: left; text-indent:10px; line-height: 40px; cursor: pointer; } .bodyBox{ width:90%; height:auto; padding:5%; } .calView{ width:100%; height:75px; outline:1px solid #b9b9b9; background: rgba(255,255,255,.8); overflow: scroll; text-indent: 5px; padding-top:5px; } .content, .contentBtn{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .btn{ display: inline; width:22%; height:30px; margin-top:15px; text-align: center; line-height:30px; outline:1px solid #b9b9b9; cursor: pointer; } .back, .reset{ display: inline; width:47%; height:30px; margin-top:15px; text-align: center; line-height:30px; outline:1px solid #b9b9b9; cursor: pointer; }
以下是html部分代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算器</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="outer">
<div class="title">
<span>計算器</span>
</div>
<div class="bodyBox">
<div class="calView"></div>
<div class="content">
<span class="btn">7</span>
<span class="btn">8</span>
<span class="btn">9</span>
<span class="btn">+</span>
<span class="btn">4</span>
<span class="btn">5</span>
<span class="btn">6</span>
<span class="btn">-</span>
<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">*</span>
<span class="btn">0</span>
<span class="btn">.</span>
<span class="btn">=</span>
<span class="btn">/</span>
</div>
<div class="contentBtn">
<span class="back">回退</span>
<span class="reset">清空</span>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
以下是js部分代碼（使用了es6的語法，使用之前請將編輯器設置為支持es6語法）：
/** * Created by Administrator on 2018/10/1. */ (function(){ let content=document.getElementsByClassName("content")[0]; let calView=document.getElementsByClassName("calView")[0]; let reset=document.getElementsByClassName("reset")[0];//清空按鈕 let back=document.getElementsByClassName("back")[0];//回退按鈕 let arr=[];//存放輸入的內容 content.onclick=function(event){ e=window.event||arguments[0]; let tar=e.target; let val=tar.innerText; if(calView.innerHTML.indexOf("=")!==-1){//如果已經計算出結果，則開始下一次計算，清空數組 calView.innerHTML=""; arr=[]; } calView.innerHTML=""; arr.push(val);//將輸入內容放入數組 if(!isNaN(parseFloat(val))){//如果輸入數字，則進行拼接 joinNum(val); } if(isNaN(parseFloat(arr[arr.length-2])) && isNaN(parseFloat(arr[arr.length-1]))){//如果上一位和這一位為符號，則刪除這一位 arr.pop(); } show();//更新窗口內容 if(val==="=" && arr.length>1){//如果輸入等號，則計算出結果 compute(arr); } }; reset.onclick=()=>{//清空輸入的內容 calView.innerHTML=""; arr=[];//清空數組 }; back.onclick=()=>{//清空輸入的內容 arr.pop(); show(); }; /** * 拼接輸入的內容 * @param val ：用戶輸入的內容 */ function joinNum(val){ if(!isNaN(parseFloat(arr[arr.length-2]))){//檢測上一個是否為數字 arr[arr.length-2]=String(parseFloat(arr[arr.length-2])*10+parseFloat(val)); arr.pop(); } if(arr[arr.length-2] === "/" && arr[arr.length-1] ==="0"){//如果分母為0，則刪除0 arr.pop(); } } /** * 更新顯示窗口內容 */ function show(){ let arrLen=arr.length; let str=""; for(let i=0;i<arrLen;i++){ str+=arr[i]; } calView.innerHTML=str;//將拼接好的字符串顯示在結果窗口中 return str; } /** * 計算出最終結果 */ function compute(arr){ let showStr=show(); calView.innerHTML=showStr + eval(showStr.split("=")[0]).toFixed(6);//由於會出現精度丟失問題，因此這裏用toFixed()處理一下 } })();
最終效果如下圖所示，樣式我寫得比較隨意，將就看吧！
（本文為原創，轉載請註明，謝謝！如果發現bug，請大家提出來！）
用JavaScript寫一個簡單的計算器