<!DOCTYPE html>
<html>
<head>
<title>??????</title>
<meta charset="utf-8" />
<style type="text/css">
.panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/border-radius: 6px;/
}
.panel p, .panel input {
font-family: "???ź?";
font-size: 20px;
margin: 4px;
float: left;
/border-radius: 4px;/
}
.panel p {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
}
.panel input {
width: 40px;
height: 40px;
border:1px solid #ddd;
}
</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" onclick="cal(event);">
<div>
<p id="screen"></p>
<input type="button" value="C">
<div ></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 ></div> </div></div>
</body>
</html>