當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript计算器（加减乘除完善）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript计算器（加减乘除完善）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<head><meta charset="UTF-8"><title></title><!--css樣式--><style type="text/css">table,tr,td{width: 300px;height: 30px;border: 1px solid blue;border-collapse: collapse;text-align: center;}body{width: 300px;margin: 20px auto;}td{background: #7FFF00;}td:hover{background: #993399;}</style><!--js代碼--><script type="text/javascript">//通過創(chuàng)建元素將表格寫出來function drawTab(ary){var table = document.getElementById("tab");for(var i = 0;i<ary.length;i++){//調用init函數(shù)里面的ary數(shù)組并對數(shù)組進行遍歷var temp = ary[i]var tr = document.createElement("tr");table.appendChild(tr);for(var j = 0;j<temp.length;j++){var td = document.createElement("td")td.innerText = temp[j];//給每一個td添加一個點擊事件td.setAttribute("onclick","calc(this)");tr.appendChild(td);}}}//設置一個真值var flag = true;function calc(num){var result = document.getElementById("result");//使用switch語句進行判斷switch(num.innerText){//判斷如果為等號的時候使用eval()函數(shù)進行計算，并將真值賦值為falsecase "=":if(result.innerText==""){return;}//通過replace替換字符串result.innerText = result.innerText.replace("×","*");result.innerText = result.innerText.replace("÷","/");result.innerText = eval(result.innerText);flag = false;break;//通過使用substr對字符串進行截取，刪除最后一個字符case "←":result.innerText = result.innerText.substr(0,result.innerText.length-1);break;//如果點擊+-×÷%時不再進行疊加，將前面的給替換掉case "+":case "-":case "×":case "÷":case "%":case ".":if(result.innerText==""){return;}if(result.innerText.substr(result.innerText.length-1,result.innerText.length)=="+"||result.innerText.substr(result.innerText.length-1,result.innerText.length)=="-"||result.innerText.substr(result.innerText.length-1,result.innerText.length)=="×"||result.innerText.substr(result.innerText.length-1,result.innerText.length)=="÷"||result.innerText.substr(result.innerText.length-1,result.innerText.length)=="%"||result.innerText.substr(result.innerText.length-1,result.innerText.length)=="."){result.innerText = result.innerText.substr(0,result.innerText.length-1);}result.innerText += num.innerText;flag = true;break;//清除操作case "c":result.innerText = "";break;//點擊0-9是進行輸入，并在點擊等號之后再點擊0-9時將輸出清空，進行下一次計算default:if(flag){}else{result.innerText = "";flag = true;}result.innerText += num.innerText;break;}}//函數(shù)調用function init(){//計算器上面要顯示的數(shù)字var ary = [["%", "c", "←", "÷"],["7", "8", "9", "×"],["4", "5", "6", "-"],["1", "2", "3", "+"],["", "0", ".", "="]];drawTab(ary)}</script></head><body onload="init()"><!--table表格--><table id="tab"><tr><td colspan="4">簡易計算器</td></tr><tr><td colspan="4" id="result"></td></tr></table></body>
總結
以上是生活随笔為你收集整理的JavaScript计算器（加减乘除完善）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript计算器
- 下一篇： JavaScript 计算器