<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .panel { border: 4px solid #ccc; width: 202px; margin: 50px auto; } .panel p,.panel input{ font-family: "黑体"; font-size:20px; margin:5px; float:left; } .panel p{ border:4px solid #ddd; height:30px; width:123px; padding:5px; } .panel input{ height:40px; width:40px; } </style> <script type="text/javascript"> function cal(e) { var obj = e.target || e.srcElement; if(obj.nodeName != "INPUT") { return; } var value = obj.value; var screen = document.getElementById("screen"); if(value=="C") { screen.innerHTML = ""; } else if (value=="=") { var exp = screen.innerHTML; try { var r = eval("("+exp+")"); screen.innerHTML = r; } catch(e) { console.log(e); screen.innerHTML = "Error"; } } else { screen.innerHTML += value; } } </script> </head> <body> <div class="panel" οnclick="cal(event);"> <div> <p id="screen"></p> <input type="button" value="C"> <div style="clear:both"></div> </div> <div> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="/"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="*"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="-"> <input type="button" value="0"> <input type="button" value="."> <input type="button" value="="> <input type="button" value="+"> <div style="clear:both"></div> </div> </div> </body> </html>