模仿系统的计算器,做了一个网页版的计算器,力求界面一致,呵呵,不过还是相差很大, 先贴图 再贴代码 1.HTML页面 <html> <head> <title>计算器</title> <mce:style type="text/css"><!-- @import url(calculator.css); --></mce:style><style type="text/css" mce_bogus="1"> @import url(calculator.css); </style> <mce:script src="calculator.js" mce_src="calculator.js"></mce:script> </head> <body onselectstart="return false" > <div id="calculator" name="calculator" > <div id="chead"> 计算器 </div> <div id="cmenu"> <table width="88%"> <tr> <td id="edit" class="menu" οnclick="menuclick(id)" οnmοuseοver="menuover(id)" οnmοuseοut="menuout(id)">编辑(<u>E</u>)</td> <td id="view" class="menu" οnclick="menuclick(id)" οnmοuseοver="menuover(id)" οnmοuseοut="menuout(id)">查看(<u>V</u>)</td> <td id="help" class="menu" οnclick="menuclick(id)" οnmοuseοver="menuover(id)" οnmοuseοut="menuout(id)">帮助(<u>H</u>)</td> </tr> <tr> <td > <div id="editMenu" οnmοuseοver="show(id);menuclick(id.replace('Menu',''))" οnmοuseοut="hide(id);menuout(id.replace('Menu',''))"> <li><a href="#" mce_href="#">复制(<u>C</u>)Ctrl+C</a></li> <li><a href="#" mce_href="#">粘贴(<u>P</u>)Ctrl+V</a></li> </div> </td> <td> <div id="viewMenu" οnmοuseοver="show(id);menuclick(id.replace('Menu',''))" οnmοuseοut="hide(id);menuout(id.replace('Menu',''))"> <li><a href="#" mce_href="#">标准型(<u>T</u>)</a></li> <li><a href="#" mce_href="#">科学型<u>S</u>)</a></li> <hr οnmοuseοver="show('viewMenu')"> <li><a href="#" mce_href="#" >数字分组<u>I</u>)</a></li> </div> </td> <td> <div id="helpMenu" οnmοuseοver="show(id);menuclick(id.replace('Menu',''))" οnmοuseοut="hide(id);menuout(id.replace('Menu',''))"> <li><a href="#" mce_href="#">帮助主题(<u>H</u>)</a></li> <li><a href="#" mce_href="#">关于计算器(<u>A</u>)</a></li> </div> </td> </tr> </table> </div> <div id="cmain"> <table> <tr > <td colspan="2"> <input type="text" id="box" name="txtBox" value="0." readonly> </td> </tr> <tr height="40"> <td width="42"> <div class="btndown" style="width:28px;height:25px;margin-left:3px"></div> </td> <td > <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><div class="btnup" style="width:64px;height:25px;" id="Backspace" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">Backspace</div></td> <td><div class="btnup" style="width:64px;height:25px;" id="CE" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">CE</div></td> <td><div class="btnup" style="width:64px;height:25px;" id="C" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">C</div></td> </tr> </table> </td> </tr> <tr> <td width="41"><div class="btnup" id="MC" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">MC</div></td> <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><div class="btnup" id="7" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">7</div></td> <td><div class="btnup" id="8" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">8</div></td> <td><div class="btnup" id="9" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">9</div></td> <td><div class="btnup" id="/" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">/</div></td> <td><div class="btnup" id="sqrt" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">sqrt</div></td> </tr> </table> </td> </tr> <tr> <td><div class="btnup" id="MR" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">MR</div></td> <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><div class="btnup" id="4" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">4</div></td> <td><div class="btnup" id="5" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">5</div></td> <td><div class="btnup" id="6" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">6</div></td> <td><div class="btnup" id="*" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">*</div></td> <td><div class="btnup" id="%" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">%</div></td> </tr> </table> </td> </tr> <tr> <td><div class="btnup" id="MS" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">MS</div></td> <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><div class="btnup" id="1" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">1</div></td> <td><div class="btnup" id="2" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">2</div></td> <td><div class="btnup" id="3" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">3</div></td> <td><div class="btnup" id="-" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">-</div></td> <td><div class="btnup" id="1/x" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">1/x</div></td> </tr> </table> </td> </tr> <tr> <td><div class="btnup" id="M+" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">M+</div></td> <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><div class="btnup" id="0" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">0</div></td> <td><div class="btnup" id="+/-" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">+/-</div></td> <td><div class="btnup" id="." οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)">.</div></td> <td><div class="btnup" id="+" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">+</div></td> <td><div class="btnup" id="=" οnmοusedοwn="btndown(id)" οnmοuseup="btnup(id)" style="color:red" mce_style="color:red">=</div></td> </tr> </table> </td> </tr> </table> </div> </div> </body> </html> 2.CSS样式 #calculator { width:267px; height:240px; background-color:#D4D0C8; border-left:2px #FFFFFF double; border-top:2px #FFFFFF double; border-right:2px dimgray solid; border-bottom:2px dimgray solid; } #calculator #chead { width:267px; height:18px; background-color:#0033CC; font-size:13px; font-weight:bold; color:#FFFFCC; padding-top:3px; } #calculator #cmenu { width:180px; height:10px; background-color:#D4D0C8; z-index:3; } .menu { font-size:12px; color:#000000; width:52px; text-align:center; border:1px #D4D0C8 solid; } .onmenu { font-size:12px; color:#000000; width:52px; text-align:center; border-left:1px #FFFFFF solid; border-top:1px #FFFFFF solid; border-right:1px #808080 solid; border-bottom:1px #808080 solid; } .clickmenu { font-size:12px; color:#000000; width:52px; text-align:center; border-left:1px #808080 solid; border-top:1px #808080 solid; border-right:1px #FFFFFF solid; border-bottom:1px#FFFFFF solid; } #calculator #cmenu td { cursor:default; padding-top:2px; padding-left:4px; } #calculator #cmenu li { list-style-type:none; list-style-position:inside; font-size:12px; padding:0px; margin:0px; background-color:#D4D0C8; } #calculator #cmenu div { display:none; position:absolute; width:120px; border-left:1px #FFFFFF solid; border-top:1px #FFFFFF solid; border-right:2px gray ridge; border-bottom:2px gray ridge; margin-top:-4px; margin-left:-3px; padding:0px; z-index:2; } #calculator #cmenu a { background-color:#D4D0C8; text-decoration:none; color:#000000; cursor:default; width:120px; margin-left:-15px; margin-top:0px; margin-bottom:0px; padding-left:20px; padding-top:3px; padding-bottom:3px; } #calculator #cmenu a:hover { background-color:#000080; color:#FFFFFF; } #calculator #cmenu hr { width:118px; margin-left:1px; margin-top:0px; border-top:1px #808080 solid; border-bottom:1px #FFFFFF solid; margin-top:0px; margin-bottom:0px; padding-left:0px; padding-top:0px; padding-bottom:0px; } #cmain { margin-top:-5px; padding:4px; } #cmain #box { text-align:right; width:247px; font-size:12px; padding-right:2px; } .btnup { width:35px; height:25px; border-top:1px #FFFFFF double ; border-left:1px #FFFFFF double ; border-right:2px gray ridge; border-bottom:2px gray ridge; text-align:center; cursor:default; background-color:#D4D0C8; padding-top:4px; font-size:12px; z-index:1; color:blue; } .btndown { width:35px; height:25px; border-right:1px #FFFFFF double ; border-bottom:1px #FFFFFF double ; border-left:2px gray ridge; border-top:2px gray ridge; text-align:center; cursor:default; background-color:#D4D0C8; padding-top:4px; font-size:12px; z-index:1; color:blue; } 3.JS代码 //定位对象 //flag:0 ID 属性对象定位 //flag:1 name 属性对象定位 //flag:2 标签 属性对象定位 function $(str,iflag) { if(iflag==0) return "string" == typeof str?document.getElementById(str):str; else if(iflag==1) return document.getElementsByName(str); else if(iflag==2) return document.getElementsByTag(str); } //鼠标按下菜单条的样式 function menuclick(id) { $(id,0).className="clickmenu"; $(id+"Menu",0).style.display="block"; } //鼠标离开菜单条的样式 function menuout(id) { $(id,0).className="menu"; $(id+"Menu",0).style.display="none"; } //鼠标经过时菜单条的样式 function menuover(id) { $(id,0).className="onmenu"; } function hide(id) { $(id,0).style.display="none"; } //隐藏菜单按钮子菜单项 function hideMenus() { hide("editMenu"); hide("viewMenu"); hide("helpMenu"); } function show(id) { $(id,0).style.display="block"; } //鼠标按下按钮样式 function btndown(id) { $(id,0).className="btndown"; } //鼠标松开按钮样式 function btnup(id) { $(id,0).className="btnup"; calculator(id); } //字符串增强类 function StringBuffer() { this._content=new Array(); } StringBuffer.prototype.append=function(sValue) { this._content.push(sValue); } StringBuffer.prototype.toString=function() { return this._content.join(""); } //堆栈类 function Stack() { this._content=new Array(); } //入栈 Stack.prototype.push=function(obj) { this._content.push(obj); } //出栈 Stack.prototype.pop=function() { return this._content.pop(); } //栈是否为空 Stack.prototype.empty=function() { return this.getSize()==0; } //栈中元素个数 Stack.prototype.getSize=function() { return this._content.length; } //获得栈最上面的一个元素值 Stack.prototype.top=function() { if(this.empty())return undefined; return this._content[this.getSize()-1]; } //清除栈中所有元素 Stack.prototype.clear=function() { while(!this.empty()) { this.pop(); } } //获得栈最下面的一个元素值 Stack.prototype.bottom=function() { if(this.empty())return undefined; return this._content[0]; } /*针对字符串*/ //是否包含某字符串元素 Stack.prototype.contains=function(dot) { if(this.empty())return false; return this._content.join("").indexOf(".")>-1; } //获取栈中所有字符串类元素的自动拼接 Stack.prototype.toString=function() { return this._content.join(""); } //清除栈中所有元素并返回所有字符串类元素的自动拼接 Stack.prototype.removeAll=function() { var sb=new StringBuffer(); this._content.reverse(); while(!this.empty()) { sb.append(this.pop()); } return sb.toString() } //存储操作数的堆栈 var num1Stk=new Stack(); var num2Stk=new Stack(); //存储操作符号的堆栈 var oppStk=new Stack(); function calculator(sid) { switch(sid) { case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": if(oppStk.empty())//运算符号不存在 { //操作数1存在且第一位不为0 或者 操作数1不存在且当前操作数不为0 if(!num1Stk.empty() && num1Stk.bottom()!="0" || num1Stk.empty() && sid!="0") num1Stk.push(sid);//将数压入操作数1号栈 showBox(num1Stk); } else//运算符号存在 { //操作数2存在且第一位不为0 或者 操作数2不存在且当前操作数不为0 if(!num2Stk.empty() && num2Stk.bottom()!="0" || num2Stk.empty() && sid!="0") num2Stk.push(sid);//将数压入操作数2号栈 showBox(num2Stk); } break; case "+": case "-": case "*": case "/": case "=": //运算符栈为空且当前操作符号不为= if(oppStk.empty() && sid!="=") { //操作数1存在 if(!num1Stk.empty()) { //将当前运算符压入运算符栈 oppStk.push(sid); //清除操作数2号栈 num2Stk.clear(); } } else if(!oppStk.empty())//运算符栈不为空 { //操作数1存在且操作2也存在 if(!num1Stk.empty() && !num2Stk.empty()) { //进行运算 //取操作数1,操作数2,和运算符 var rs=eval(num1Stk.removeAll()+""+oppStk.pop()+""+num2Stk.removeAll());//operation(num1Stk.removeAll(),oppStk.pop(),num1Stk.removeAll());// //将运算结果压入操作数1号栈,以便累积运算 num1Stk.push(rs); showBox(num1Stk); //将当前运算符压入操作符号栈不包括= if(sid!="=")oppStk.push(sid); } //操作数1存在且操作2不存在 if(!num1Stk.empty() && num2Stk.empty()) { //操作符号栈执行退栈 oppStk.pop(); //将当前新运算符压入操作符号栈不包括= if(sid!="=")oppStk.push(sid); } } break; case "Backspace": //运算符栈为空 且 操作数1存在 if(oppStk.empty() && !num1Stk.empty()) { //操作数1号栈退栈 num1Stk.pop(); showBox(num1Stk); } else if(!oppStk.empty() && !num2Stk.empty())//运算符栈不为空 且 操作数2存在 { num2Stk.pop(); showBox(num2Stk); } break; case "sqrt": case "+/-": case "1/x": if(!num2Stk.empty())//操作数2存在 { var rs=One(sid,num2Stk.removeAll());//进行一元运算 num1Stk.clear(); oppStk.clear(); num1Stk.push(rs); } else if(num2Stk.empty() && !num1Stk.empty())//操作数1存在,操作数2不存在 { oppStk.clear(); var rs=One(sid,num1Stk.removeAll()); num1Stk.push(rs); } showBox(num1Stk); break; case ".": if(!oppStk.empty())//运算符号栈不为空 { if(!num2Stk.empty())//操作数2号栈不为空 { if(!num2Stk.contains("."))num2Stk.push(sid); } else { num2Stk.push("0."); } showBox(num2Stk); } else { if(!num1Stk.empty())//操作数1号栈不为空 { if(!num1Stk.contains("."))num1Stk.push(sid); } else { num1Stk.push("0."); } showBox(num1Stk); } break; case "C": case "CE": num1Stk.clear(); num2Stk.clear(); oppStk.clear(); showBox(num1Stk); break; } } //显示结果 function showBox(stk) { if(stk.empty()) { $('box',0).value="0."; return; } if(stk.contains("."))$('box',0).value=stk.toString(); else $('box',0).value=stk.toString()+"."; } //一元运算 function One(op,num) { num=parseFloat(num); switch(op) { case "1/x": return 1/num; break; case "sqrt": return Math.sqrt(num); break; case "+/-": return -num; break; } }