简单计算机的js

来源：互联网发布：淘宝骗手机编辑：程序博客网时间：2024/05/23 21:56

计算机的js

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Study</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<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>

<body>
<div class="panel" onclick="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="0" />
<input type="button" value="." />
<input type="button" value="=" />
<input type="button" value="+" />
<div style="clear: both;"></div>
</div>
</div>
<script>

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){
  screen.innerHTML="error";
}
}else{
screen.innerHTML +=value;
}
}
</script>
</body>

</html>

阅读全文

0 0