<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>网页计算器</title> <style type="text/css"> #container { width: 432px; margin: 0 auto; text-align: center; height: 324px; } div { text-align: left; width: 400px; } input { height: 37px; width: 93px; margin-bottom: 10px; background: #CA0; font-size: 30px; } input#answer { height: 37px; width: 381px; color: #FFF; font-size: 35px; text-align: right; background: #38B; } input#equ { height: 37px; width: 190px; } input#rst { height: 37px; width: 190px; } </style> <script language="javascript" type="text/javascript"> // 错误处理 window.onerror = function killerr() { return true; } // 计算所需的两个因数 var param1, param2; // 计算结果 var answer; // 运算符 var oprt; // 因数标记 var flag; // 计算参数分配函数 function doCalc(val) { if (document.getElementById("answer").getAttribute("value") == "ERROR" && val != "CE") { // 计算器出错时提示,并终止操作 alert("Please reset calculator"); return false; } switch (val) { // 操作符 case "+": case "-": case "*": case "/": getOprt(val); break; // 计算 case "=": calc(); break; // 复位 case "CE": initCalc(); break; // 其他(因数输入) default: getParam(val); } } // 获取计算因数 function getParam(val) { val = val + ""; // 显式转化为字符串 // 处理正负 if (val == "-/+") { if (flag == 1) { param1 = neg(param1); } if (flag == 2) { param2 = neg(param2); } } else if (val == ".") { // 处理小数点 if (flag == 1) { param1 = dot(param1); } if (flag == 2) { param2 = dot(param2); } } else { if (isNaN(parseInt(val))) return; // 正常数字 if (flag == 1) { param1 = digit(param1, val); } if (flag == 2) { param2 = digit(param2, val); } } // 回显 if (flag == 1) { disp(param1); } if (flag == 2) { disp(param2); } } // 获取操作符 function getOprt(val) { // alert(val); if (flag == 2 && oprt != "") { calc(); } oprt = val; flag = 2; // disp(oprt); } // 计算结果 function calc() { var m = parseFloat(param1); var n = parseFloat(param2); if (isNaN(m) || isNaN(n)) { alert("Input is not a number."); return; } switch (oprt) { case "+": answer = m + n; break; case "-": answer = m - n; break; case "*": answer = m * n; break; case "/": if (n != 0) { answer = m / n; } else { alert("Warning,can't div 0"); answer = "ERROR"; } break; } disp(answer); // 以下实现连续计算 if (answer != "ERROR") { flag = 2; // 确认参数标记 param1 = answer; // 计算结果赋给第一参数 param2 = 0; // 第二参数清零等待输入 oprt = ""; // 清理操作符 } } // 处理小数点 function dot(val) { val = val + ""; // 转换为字符串 if (val.indexOf(".") != -1) { return val; } else { if (val == 0 || val == "0" || val == "") { return "0."; } else { return val + "."; } } } // 处理正负数 功能:求相反数 function neg(val) { val = val + ""; var vallen = val.length; if (vallen <= 0) { val = 0; } if (val == "0") { val = 0; } /*如果为负数(首字符为"-"), 则去掉负号("-"), 即取出负号之后的子串, 否则添加负号 */ if (val.charAt(0) == "-") { val = val.substring(1, vallen); } else { val = "-" + val; } return val; } // 输入数字 function digit(factor, val) { factor = factor + ""; val = val + ""; if (factor == "0") { // 处理连续输入多个引导0 factor = val; } else { factor = factor + val; } return factor; } // 回显输入与结果 function disp(param) { if (!document.getElementById) return false; if (!document.getElementById("answer")) return false; var monitor = document.getElementById("answer"); monitor.setAttribute("value", param); } // 初始化与复位计算器 function initCalc() { param1 = 0; // 第一个因数 param2 = 0; // 第二个因数 answer = 0; // 结果 oprt = ""; // 操作符 flag = 1; // 输入因数个数标记 if (!document.getElementById) return false; if (!document.getElementById("answer")) return false; var ipt = document.getElementById("answer"); ipt.setAttribute("value", 0); } // 获取鼠标点击事件 function getEvnt() { if (!document.getElementsByTagName) return false; if (!document.getElementsByTagName("input")) return false; var btn = document.getElementsByTagName("input"); var btnlen = btn.length; for (var i = 0; i < btnlen; i++) { btn[i].onclick = function() { if (this.getAttribute("id") == "answer") { // 点击显示框取消响应 return false; } // 计算处理代码 var prm = this.getAttribute("value"); doCalc(prm); // 无错误时进行后续计算操作 } } } //获取键盘事件 function getKey() { document.body.onkeypress = function() { //this.onpr } } //屏蔽回显区键盘事件 function maskkeyboard() { if (!document.getElementById) return false; if (!document.getElementById("answer")) return false; var trgt = document.getElementById("answer"); trgt.onfocus = function() { //do nothing this.onkeypress = function() { return false; } } } // 添加多个装载函数 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } // 载入计算器 addLoadEvent(initCalc); addLoadEvent(getEvnt); addLoadEvent(maskkeyboard); </script> </head> <body> <div id="container"> <div> <input id="answer" type="text" /> </div> <div> <input id="num1" type="button" value="1" /> <input id="num2" type="button" value="2" /> <input id="num3" type="button" value="3" /> <input id="add" type="button" value="+" /> <br /> <input id="num4" type="button" value="4" /> <input id="num5" type="button" value="5" /> <input id="num6" type="button" value="6" /> <input id="sub" type="button" value="-" /> <br /> <input id="num7" type="button" value="7" /> <input id="num8" type="button" value="8" /> <input id="num9" type="button" value="9" /> <input id="mul" type="button" value="*" /> <br /> <input id="neg" type="button" value="-/+" title="取反" /> <input id="num0" type="button" value="0" /> <input id="dot" type="button" value="." title="小数点" /> <input id="dv" type="button" value="/" /> <br /> <input id="rst" type="reset" value="CE" title="复位" /> <input id="equ" type="button" value="=" title="计算" /> </div> </div> </body> </html>