html、js写了一个简单的计算器
效果图如下：
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
#calculator{
margin: 15px auto;
width:330px;
height:400px;
border: 1px solid lightgray;
padding:15px;
float:left;
background-color:#C7D6DA;
}
#shuRu{
margin-top:15px;
}
.screen{
margin-top:5px;
width:300px;
height:40px;
text-align: right;
padding-right:10px;
font-size:20px;
}
#keys{
border:1px solid lightgray;
height:270px;
margin-top:25px;
padding:8px;
}
#keys .buttons{
float:left;
width: 42px;
height: 36px;
text-align:center;
background-color:#C7D6DA;
margin: 0 17px 20px 0;
}
</style>
<script type="text/javascript">
var num = 0 ;
function dj(num){
document.getElementById('screenName').value += document.getElementById(num).value;
textRecard=document.getElementById('textAll').value += document.getElementById(num).value;
}
function denghao(){
document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
document.getElementById("textAll").value = document.getElementById("textAll").value + "=" + eval(document.getElementById("screenName").value) + '\n';
document.getElementById('screenName').value=" ";
}
function del(){
document.getElementById("textAll").value = null;
}
function clearNum(){
document.getElementById("screenName").value = null;
document.getElementById("screenName").focus();
}
function back(){
var arr = document.getElementById("screenName");
arr.value = arr.value.substring(0, arr.value.length - 1);
}
</script>
</head>
<body>
<div style="min-width:800px; min-height:500px;">
<div>
<textarea id="textAll" width:400px;height:800px="width:400px;height:800px"></textarea>
</div>
<div id="calculator">
<div id="shuRu">
<div class="screen">
<input type="text" id="screenName" name="screenName" class="screen">
</div>
</div>
<div id="keys">
<input type="button" id="del" onclick="del()" value="删除" class="buttons">
<input type="button" id="CE" onclick="clearNum()" value="CE" class="buttons">
<input type="button" id="C" onclick="back()" value="C" class="buttons">
<input type="button" id="±" onclick="dj(this.id)" value="±" class="buttons">
<input type="button" id="√" onclick="dj(this.id)" value="√" class="buttons" style="margin-right:0px">
<input type="button" id="1" onclick="dj(this.id)" value="1" class="buttons">
<input type="button" id="2" onclick="dj(this.id)" value="2" class="buttons">
<input type="button" id="3" onclick="dj(this.id)" value="3" class="buttons">
<input type="button" id="/" onclick="dj(this.id)" value="/" class="buttons">
<input type="button" id="%" onclick="dj(this.id)" value="%" class="buttons" style="margin-right:0px">
<input type="button" id="4" onclick="dj(this.id)" value="4" class="buttons">
<input type="button" id="5" onclick="dj(this.id)" value="5" class="buttons">
<input type="button" id="6" onclick="dj(this.id)" value="6" class="buttons">
<input type="button" id="*" onclick="dj(this.id)" value="*" class="buttons">
<input type="button" id="//" onclick="dj(this.id)" value="1/x" class="buttons" style="margin-right:0px">
<input type="button" id="7" onclick="dj(this.id)" value="7" class="buttons">
<input type="button" id="8" onclick="dj(this.id)" value="8" class="buttons">
<input type="button" id="9" onclick="dj(this.id)" value="9" class="buttons">
<input type="button" id="-" onclick="dj(this.id)" value="-" class="buttons">
<input type="button" id="eva" onclick="denghao()" value="=" class="buttons" style="margin-right:0px;height:90px">
<input type="button" id="0" onclick="dj(this.id)" value="0" class="buttons" style="margin-top:-55px;width:100px">
<input type="button" id="." onclick="dj(this.id)" value="." class="buttons" style="margin-top:-55px; font-weight:bold">
<input type="button" id="+" onclick="dj(this.id)" value="+" class="buttons" style="margin-top:-55px">
</div>
</div>
</body>
</html>