當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS计算器实现
一 簡介
本計算器是仿造windows系統(tǒng)實(shí)現(xiàn)的，實(shí)現(xiàn)了基本的功能：四則運(yùn)算，清除，退位，小數(shù)點(diǎn)，正負(fù)號功能。另外，代碼來自某課網(wǎng)課程。對于初學(xué)者而言，可以拿來練練手，重點(diǎn)是學(xué)習(xí)其中一些函數(shù)的使用，以及js語法。
html代碼
Calculator.html <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Calculator</title><link rel="stylesheet" type="text/css" href="calc.css"><script type="text/javascript" src="calc.js"></script><script type="text/javascript" src="js/imooc.js"></script></head> <body onload="init()"><div id="div1"><div id="div2"><input type="text" name="num" id="num"></div><div id="div3"><input type="button" value="c" name="" id="" ><input type="button" value="←" name="" id="" ><input type="button" value="+/-" name="" id="" ><input type="button" value="/" name="" id="" ><input type="button" value="1" name="" id="" ><input type="button" value="2" name="" id="" ><input type="button" value="3" name="" id="" ><input type="button" value="*" name="" id="" ><input type="button" value="4" name="" id="" ><input type="button" value="5" name="" id="" ><input type="button" value="6" name="" id="" ><input type="button" value="-" name="" id="" ><input type="button" value="7" name="" id="" ><input type="button" value="8" name="" id="" ><input type="button" value="9" name="" id="" ><input type="button" value="+" name="" id="" ><input type="button" value="0" name="" id="" ><input type="button" value="." name="" id="" ><input type="button" value="=" name="" id="" ><input type="button" value="link" name="" id="link" ></div> </div> </body> </html>css代碼
*{margin:0px;padding:0px; }div{width: 170px; }#div1{position: absolute;left: 100px;top: 50px; }input[type="button"]{width: 30px;margin-right:5px ;}input[type="text"]{width: 150px;border:1px solid black;text-align: right;background-color: #ffffff;box-sizing: border-box;padding-right:5px; }input[type="button"]:hover{background-color: red;border-width: 1px;border-style: solid;border-color: black; }js代碼
/*計算器實(shí)現(xiàn)*/// Initialize the calculator // 初始化寫在js中而不是html中，方便以后維護(hù) function init(){// 初始化文本框var num = document.getElementById("num");num.value = "0";num.disabled = "disabled"; // 給按鈕綁定點(diǎn)擊事件處理器，點(diǎn)擊按鈕后文本框顯示var buttons = document.getElementsByTagName("input");var num1;var num2;var ope;// 給按鈕綁定事件處理器for(i in buttons){buttons[i].onclick = function(){if(isNumber(this.value)){if(isNull(num))num.value = this.value;elsenum.value = num.value + this.value;}else{var btn_val = this.value;switch (btn_val) {case "c":num.value = "0";break;case "+/-":num.value = switchSign(num.value);break;case "←":num.value = back(num.value);break;case "+":num1 = num.value;num.value = "0";ope = "+";break;case "-":num1 = num.value;num.value = "0";ope = "-";break;case "*":num1 = num.value;num.value = "0";ope = "*";break;case "/":num1 = num.value;num.value = "0";ope = "/";break;case "=":num2 = num.value;num.value = calc(ope, num1, num2);break;case ".":num.value = appendDecimalPoint(num.value);break;default:// statements_defbreak;}}}}}// Back function back(n){if(!isNull(n)){if(n.length > 1){n = n.slice(0, n.length - 1);}else{n = "0";}}return n; }// Switch plus or minus function switchSign(n){// 字符串處理方式if(n.indexOf("-") == -1)n = "-" + n;elsen = n.substring(1, n.length);return n; }// Append a decimal point function appendDecimalPoint(n){// if the number n don't contain a decimal point, Append it.if(n.indexOf(".") == -1){n = n + ".";return n;} }// Arithmetic operations function calc(ope,num1,num2){num1 = Number(num1);num2 = Number(num2);switch(ope){case "+":return num1 + num2;case "-":return num1 - num2;case "*":return num1 * num2;case "/":if(num2 == 0){alert("The divisor mustn't be zero. Please retype!");return num1;}return num1 / num2;default:alert("The operation is not one of arithmetic operations!");break;} }// Determine if it's empty or zero. function isNull(textBoxObj){return textBoxObj.length == 0 || textBoxObj.value == "0"; } // Determine if it's a number. function isNumber(n){return !isNaN(n); }// 給link按鈕綁定事件處理器 function linkimooc(){var btn = document.getElementById("link");btn.onclick = function(){window.location.href = "https://www.imooc.com";} }二、效果
總結(jié)
- 上一篇： 用js实现简单计算器
- 下一篇： JavaScript实现简易计算器