<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style type="text/css">
.panel{
border: 4px solid #CCCCCC;
border-radius: 10px;
width: 192px;
margin: 100px auto;
}
.panel p,.panel input{
font-family: "黑体";
font-size: 30px;
margin: 4px;
float: left;
border-radius: 6px;
}
.panel input{
width: 40px;
height: 40px;
}
.panel p{
width: 126px;
height: 30px;
border: 2px solid #CCCCCC;
padding: 3px;
}
</style>
<script type="text/javascript">
function cal(event){
var oP = document.getElementById("screen");
var obj = event.srcElement || event.target;
if(obj.nodeName=="DIV"){
return;
}
var value = obj.value;
if(value=="C"){
oP.innerHTML = "";
}else if(value=="="){
try{
var exp = oP.innerHTML;
var result = eval("("+exp+")");
oP.innerHTML = result;
}catch(e){
oP.innerHTML = "ERROR";
}
}else{
oP.innerHTML += value;
}
}
</script>
</head>
<body>
<div class="panel" onclick="cal(event)">
<div>
<p id="screen"></p>
<input type="button" value="C" />
</div>
<div>
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="/" /><br>
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="*" /><br>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="-" /><br>
<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>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style type="text/css">
.panel{
border: 4px solid #CCCCCC;
border-radius: 10px;
width: 192px;
margin: 100px auto;
}
.panel p,.panel input{
font-family: "黑体";
font-size: 30px;
margin: 4px;
float: left;
border-radius: 6px;
}
.panel input{
width: 40px;
height: 40px;
}
.panel p{
width: 126px;
height: 30px;
border: 2px solid #CCCCCC;
padding: 3px;
}
</style>
<script type="text/javascript">
function cal(event){
var oP = document.getElementById("screen");
var obj = event.srcElement || event.target;
if(obj.nodeName=="DIV"){
return;
}
var value = obj.value;
if(value=="C"){
oP.innerHTML = "";
}else if(value=="="){
try{
var exp = oP.innerHTML;
var result = eval("("+exp+")");
oP.innerHTML = result;
}catch(e){
oP.innerHTML = "ERROR";
}
}else{
oP.innerHTML += value;
}
}
</script>
</head>
<body>
<div class="panel" onclick="cal(event)">
<div>
<p id="screen"></p>
<input type="button" value="C" />
</div>
<div>
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="/" /><br>
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="*" /><br>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="-" /><br>
<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>