<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <mce:style type='text/css'><!-- body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","Arial Narrow";} ul,ol{list-style-type:none;} select,input,img,select{vertical-align:middle;} .clac{height:300px;width:300px;border:1px solid black;text-align:center;margin:0 auto;} #js{height:25px;width:280px;margin-top:5px;text-align:right;line-height:25px;border:1px solid #ccc;} .clac1{width:300px;height:270px;} .clac1_1{width:300px;height:25px;margin-top:10px;text-align:right;} .clac1_1 #button1{width:80px;height:25px;} .clac1_1 #button2{width:30px;height:25px;margin-left:10px;margin-right:10px;} .clac1_2{width:300px;height:230px;} .btn{width:20%;height:230px;float:left;text-align:center;} .btn button{display:block;width:30px;heigth:50px;margin-top:20px;margin-left:auto;margin-right:auto;} --></mce:style><style type='text/css' mce_bogus="1"> body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","Arial Narrow";} ul,ol{list-style-type:none;} select,input,img,select{vertical-align:middle;} .clac{height:300px;width:300px;border:1px solid black;text-align:center;margin:0 auto;} #js{height:25px;width:280px;margin-top:5px;text-align:right;line-height:25px;border:1px solid #ccc;} .clac1{width:300px;height:270px;} .clac1_1{width:300px;height:25px;margin-top:10px;text-align:right;} .clac1_1 #button1{width:80px;height:25px;} .clac1_1 #button2{width:30px;height:25px;margin-left:10px;margin-right:10px;} .clac1_2{width:300px;height:230px;} .btn{width:20%;height:230px;float:left;text-align:center;} .btn button{display:block;width:30px;heigth:50px;margin-top:20px;margin-left:auto;margin-right:auto;} </style> </head> <body> <div class='clac' align='center'> <input id="js" name="xs" type="text" value='0.' readonly="readonly"/> <div class='clac1'> <div class='clac1_1'><button id='button1' οnclick='back()'>Backspace</button><button id='button2' οnclick='ClearEntry()'>CE</button></div> <div class='clac1_2'> <div class='btn'> <button οnclick='numPress(7)'>7</button> <button οnclick='numPress(4)'>4</button> <button οnclick='numPress(1)'>1</button> <button οnclick='numPress(0)'>0</button> </div> <div class='btn'> <button οnclick='numPress(8)'>8</button> <button οnclick='numPress(5)'>5</button> <button οnclick='numPress(2)'>2</button> <button οnclick='Neg()'>+/-</button> </div> <div class ='btn'> <button οnclick='numPress(9)'>9</button> <button οnclick='numPress(6)'>6</button> <button οnclick='numPress(3)'>3</button> <button οnclick='dot(".")'>.</button> </div> <div class='btn'> <button οnclick='Operation ("/")'>/</button> <button οnclick='Operation ("*")'>*</button> <button οnclick='Operation ("-")'>-</button> <button οnclick='Operation ("+")'>+</button> </div> <div class='btn'> <button οnclick='Operation("%")'>%</button> <button οnclick='Operation("=")'>=</button> </div> </div> </div> </div> <mce:script type='text/javascript'><!-- var Anum = 0; //保存第一个数 var FlagNewNum = false; //判断是否第二个数 var Operator = ''; //保存运算符号 function numPress(num){ var values = document.getElementById('js'); if(FlagNewNum){ //判断是否是第二个数 values.value = num; FlagNewNum = false; }else{ if(values.value=='0.'){ //判断是否为零 values.value = num; }else{ values.value += num; } } } function back(){ var curReadOut = document.getElementById('js').value; if(curReadOut!='0.'){ curReadOut=curReadOut.slice(0,-1); } if(curReadOut==''){ document.getElementById('js').value = '0.'; }else{ document.getElementById('js').value = curReadOut; } } function Neg(){ document.getElementById('js').value=parseFloat(document.getElementById('js').value)*-1; } function ClearEntry(){ document.getElementById('js').value = "0."; FlagNewNum = true; } function dot(){ var curReadOut = document.getElementById('js').value; if (FlagNewNum) { curReadOut = "0."; FlagNewNum = false; }else{ if (curReadOut.indexOf(".") == -1) curReadOut += "."; } document.getElementById('js').value = curReadOut; } function Operation(op){ var num = document.getElementById('js').value; if(FlagNewNum && Operator != '='){ }else{ FlagNewNum=true; if('+'==Operator){ Anum+=parseFloat(num); }else if('-'==Operator){ Anum-=parseFloat(num); }else if('*'==Operator){ Anum*=parseFloat(num); }else if('/'==Operator){ if(parseFloat(num)==0){ Anum='除数不能为零'; }else{ Anum/=parseFloat(num); } }else if('%'==Operator){ if(parseFloat(num)==0){ Anum='余数不能为零'; }else{ Anum%=parseFloat(num); } }else{ if(num=='余数不能为零' || num=='除数不能为零'){ Anum=num; }else{ Anum = parseFloat(num); //如果运算符号不存在,就讲值赋值给第一个 } } document.getElementById('js').value=Anum; //将第一个数在运算框中显示 Operator = op; //将运算符号赋值给运算符 } } // --></mce:script> </body> </html>