下面是代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/css.css" /> </head> <body> <div id="d_text"> <input type="text" id="text" value="0" readonly="readonly"/> </div> <div id="value"> <ul> <li onclick="clearall()">C</li> <li onclick="goback()">D</li> <li onclick="get(7)">7</li> <li onclick="get(8)">8</li> <li onclick="get(9)">9</li> <li onclick="get('*')">x</li> <li onclick="get('/')">/</li> <li onclick="get(4)">4</li> <li onclick="get(5)">5</li> <li onclick="get(6)">6</li> <li onclick="get('+')">+</li> <li onclick="get('-')">-</li> <li onclick="get(1)">1</li> <li onclick="get(2)">2</li> <li onclick="get(3)">3</li> <li onclick="get('%')">%</li> <li onclick="equal()">=</li> <li onclick="get(0)">0</li> <li onclick="get('00')">00</li> <li onclick="get('.')">.</li> </ul> </div> </body> <script type="text/javascript" src="js/js.js" ></script> </html>
js的代码
function get(key){ var str = document.getElementById("text").value; if(str.length<20){ if(str==""){ str = "0"; } if(str == "0"&&key=='00'||str=="0"&&key=='0'){ str = "0"; } else{ if(str == "0"){ str = ""; } str = str+key; } } document.getElementById("text").value = str; } function goback(){ var str = document.getElementById("text").value; str = str.substring(0,str.length-1); if(str == ""){ str = "0"; } document.getElementById("text").value=str; } function clearall(){ document.getElementById("text").value="0"; } function equal(){ var str = document.getElementById("text").value; var result = eval(str); if(result=="Infinity"){ result = "不合法输入"; alert("不合法输入"); }else{ document.getElementById("text").value = result; } }
css的代码
#d_text { width: 1000px; } #text{ padding-right: 10px; width: 600px; height: 50px; font-size: 25px; text-align: right; border: solid 1px white; border: double 1px; } #value{ width: 600px; height: 408px; } #value ul li{ margin: 10px; list-style: none;float: left; width: 80px;height: 50px;line-height: 55px; text-align: center;background-color: white; border: 1px solid black; font-size: 30px; }