Javascript 實(shí)現(xiàn)計(jì)算器:
系列文章:
JS 實(shí)現(xiàn)計(jì)算器詳解及實(shí)例代碼(一)
Javascript 實(shí)現(xiàn)計(jì)算器時(shí)間功能詳解及實(shí)例(二)
小型JavaScript計(jì)算器
自己尋思出的解決方案,比較笨拙的方法,雖然完成了但是還有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的細(xì)節(jié)地方也考慮到了,但是還有其他的細(xì)節(jié)需要處理。
總體設(shè)計(jì)思路是,先畫(huà)草圖 -> 設(shè)計(jì)UI -> 編寫(xiě)UI代碼 -> 編寫(xiě)CSS -> 編寫(xiě)JS邏輯代碼;
面板(main-board)
面板整體尺寸設(shè)計(jì)

標(biāo)題欄(board-title)
屏顯區(qū)(board-result)
按鈕區(qū)(board-keys),使用表格完成,然后給每個(gè)td添加onclick事件
完成界面

導(dǎo)入新字體
// main.css@font-face { font-family: Lovelo-Black;/×定義font的名字×/ src: url('font/Lovelo Black.otf');/*把下載的字體文件引入進(jìn)來(lái)×/ } 代碼分析
代碼組織結(jié)構(gòu)
計(jì)算器對(duì)象:Calculator;
計(jì)算器屬性:
計(jì)算器方法:
輔助方法
代碼邏輯
使用方法
計(jì)算器對(duì)象
// 計(jì)算器對(duì)象function Calculator() { // 私有屬性 this.bdResult = $("board-result"); // 計(jì)算機(jī)面板結(jié)果顯示區(qū)對(duì)象 this.operator = ['+', '-', '×', '÷', '=']; this.digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']; // 組成有效數(shù)字的數(shù)字?jǐn)?shù)組 this.dot = '.'; this.equal = '='; this.zero = '0'; this.digit = ""; // 當(dāng)前輸入的數(shù)字 this.expression = ""; // 表達(dá)式 this.resSpan = getResSpan(); // 數(shù)字顯示區(qū) this.resDown = $("result-down"); // 表達(dá)式顯示區(qū) this.last = ""; // 上一次按下的按鈕內(nèi)容 this.allDigits = []; // 從表達(dá)式中獲取的所有數(shù)字組成的數(shù)組,將用來(lái)和ops中的操作符對(duì)應(yīng)計(jì)算出結(jié)果 this.ops = []; // 所有操作符組成的數(shù)組 this.hasEqual = false; // 判斷是否按下了'='鍵 this.lastRes = 0; // 上一次計(jì)算的結(jié)果,即上一次按等號(hào)后計(jì)算出的值 // 私有方法}添加點(diǎn)擊事件(注意this在閉包里的引用問(wèn)題)
// 為td添加點(diǎn)擊事件Calculator.prototype.addTdClick = function () { var tds = $tag("td"); var that = this; // 需要注意保存this的引用 // 為每個(gè)td添加點(diǎn)擊事件 for (var i = 0; i < tds.length; i++) { tds[i].onclick = function (){ // alert(this.innerText); var text = this.innerText; that.calculatorClickEvent(text); }; }};計(jì)算器點(diǎn)擊事件處理入口
// 計(jì)算器按鈕事件Calculator.prototype.calculatorClickEvent = function (btnText) { // 上一個(gè)按鍵是'=' if (this.hasEqual) { this.hasEqual = false; this.clearData(); } // 結(jié)果顯示在board-result里 if (btnText != "AC" && btnText != "CE") { this.btnClickHanlder(btnText); } else { // AC或CE清零 this.clearData(); }};計(jì)算器點(diǎn)擊事件處理程序
// 計(jì)算器的按鍵事件處理Calculator.prototype.btnClickHanlder = function (btnText) { if ((btnText >= '0' && btnText <= '9') || btnText == this.dot) { // 數(shù)字鍵處理 // 如果上一個(gè)是操作符,則清空當(dāng)前數(shù)字區(qū) if (this.isOperator(this.last)) { this.resSpan.innerText = ''; this.digit = ''; } else if ((btnText == this.dot) && (this.last == this.dot)) { // 如果上一個(gè)也是點(diǎn),則對(duì)本次的點(diǎn)按鈕不做響應(yīng) return; } this.digit += btnText; this.expression += btnText; } else if (this.isOperator(btnText)) { // 操作符處理 // 如果當(dāng)前表達(dá)式為'0',按'=',不給響應(yīng) if ((btnText == this.equal) && (this.resDown.innerText == this.zero || this.resDown.innerText == "")) return; // 如果上一個(gè)是非'='的操作符則不進(jìn)行處理 if (!this.isOperator(this.last) && btnText == this.equal) { // '='處理 this.showCurrRes(this.zero, this.expression + btnText); // 計(jì)算結(jié)果顯示在表達(dá)式區(qū)域 return; } else if (this.isOperator(this.last)) { // 上一個(gè)是操作符,此次的操作符不做記錄 return; } else { this.expression += btnText; } } this.showCurrRes(this.digit, this.expression); this.last = btnText;};處理將要顯示的表達(dá)式和當(dāng)前輸入的數(shù)字
// 顯示當(dāng)前結(jié)果的觸發(fā)方法Calculator.prototype.showCurrRes = function (digit, expression) { if (!expression) return; this.showText(digit, expression); // 1. 沒(méi)有'=',表示還沒(méi)有到計(jì)算結(jié)果的時(shí)候,直接退出 if (expression.indexOf(this.equal) == -1) return; // 計(jì)算出了結(jié)果 this.hasEqual = true; // 2. 處理只按了數(shù)字然后直接按了等號(hào)的情況,即:'234='則直接返回234 var tmpStr = this.delHeadZero(expression.substr(0, expression.length - 1)); // 去掉最后一個(gè)'=' if (!this.hasOperator(tmpStr)) { this.showText(tmpStr, expression + tmpStr); return; } // 3. 處理表達(dá)式字符串,且計(jì)算出結(jié)果 var start = 0; for (var i = 0; i < expression.length; i++) { var c = expression[i]; if (this.isOperator(c)) { // 操作符 this.ops.push(c); // 保存操作符 var numStr = expression.substr(start, i + 1); // 數(shù)字字符串 var number = 0; // 浮點(diǎn)數(shù)和整型處理 if (numStr.indexOf(this.dot)) { number = parseFloat(numStr); } else { number = parseInt(numStr); } this.allDigits.push(number); // 保存數(shù)字 start = i + 1; // 重設(shè)數(shù)字起始位置,即操作符的下一個(gè)字符開(kāi)始 } } // 用allDigits和ops去計(jì)算結(jié)果 var res = this.calResult(); // 保存此次計(jì)算結(jié)果,作為下一次計(jì)算用 [TODO] this.lastRes = res; // 將結(jié)果顯示出來(lái) this.showText(res + '', expression + res);};將處理結(jié)果顯示到屏顯區(qū)
// 將表達(dá)式和計(jì)算結(jié)果顯示到屏顯區(qū)Calculator.prototype.showText = function (digitStr, expression) { // 先刪除開(kāi)頭的'0' var expStr = this.delHeadZero(expression); var digStr = this.delHeadZero(digitStr); // 然后再根據(jù)情況決定是否添加'0' var tmp = expression == this.zero ? expression : this.addZero(expStr);; var dig = digitStr == this.zero ? digitStr : this.addZero(digStr); this.resSpan.innerText = dig; // 如果表達(dá)式第一個(gè)是操作符,則表示之前按的是'0',則給補(bǔ)上'0',因?yàn)榍懊鎸㈤_(kāi)頭的'0'都刪掉了 if (this.isOperator(tmp[0])) { tmp = this.zero + tmp; } this.resDown.innerText = tmp;}計(jì)算結(jié)果函數(shù)
// 計(jì)算結(jié)果Calculator.prototype.calResult = function () { var first = 0; var second = 0; var res = 0; for (var i = 0; i < this.ops.length; i++) { first = this.allDigits[i]; second = this.allDigits[i + 1]; switch (this.ops[i]) { case '+': res = first + second; break; case '-': res = first - second; break; case '×': res = first * second; break; case '÷': res = first / second; break; default: break; } this.allDigits[i + 1] = res; } return res;};清空數(shù)據(jù)
// 計(jì)算完一次,清空所有數(shù)據(jù),以備下次計(jì)算使用Calculator.prototype.clearData = function () { this.allDigits = []; this.ops = []; this.expression = this.zero; this.digit = ''; this.resSpan.innerText = this.zero; this.resDown.innerText = this.zero;};輔助函數(shù)
處理表達(dá)式開(kāi)頭的'0'問(wèn)題(第一個(gè)按鈕是0鍵或者第一個(gè)是小于1的浮點(diǎn)數(shù),表達(dá)式需要補(bǔ)零;)
// 開(kāi)頭添加'0',防止重復(fù)出現(xiàn)或者沒(méi)有'0'情況Calculator.prototype.addZero = function (expression) { if (!expression) return this.zero; if (expression[0] == this.dot) { // 浮點(diǎn)數(shù) return this.zero + expression; } else { return expression; }};開(kāi)頭去零函數(shù)
// 去開(kāi)頭的零Calculator.prototype.delHeadZero = function (str) { // 先把開(kāi)頭的‘0'都刪掉 var tmp = ""; tmp = str.replace(/^[0]+/gi, ""); if (tmp[0] == this.dot) { // 浮點(diǎn)數(shù)重新補(bǔ)上'0' tmp = this.zero + tmp; } return tmp;};判斷字符串里是否含有操作符
// 判斷表達(dá)式中是否含有操作符Calculator.prototype.hasOperator = function (str) { if (!str) return; for (var i = 0; i < this.operator.length; i++) { if (str.indexOf(this.operator[i]) >= 0) { return true; } } return false;};其他函數(shù)
// 獲取輸入的數(shù)字顯示區(qū)對(duì)象function getResSpan() { return $("result-up").getElementsByTagName("span")[0];}// 根據(jù)標(biāo)簽名獲取DOM對(duì)象function $tag(tagName) { return document.getElementsByTagName(tagName);}// 根據(jù)ID獲取DOM對(duì)象function $(id) { return document.getElementById(id);}問(wèn)題
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注