前端ABC复制直接使用
<html>
<head>
<title>计算器</title>
<style type=text/css>
div{width:290px;margin:0 auto;border:3px solid #87CEFA;position:relative;background-color:#C1FFC1;}
#c{display:block;width:270px;height:36px;position:absolute;left:10px;top:56px;}
#sum{display:block;width:188px;height:36px;margin:10px 10px;float:left;font-size:20px;}
#del{width:72px;height:36px;position:absolute;top:10px;right:10px;}
table{width:280px;margin:90px auto 5px;}
td{border:1px solid black;text-align:center;background-color:red;font-size:20px;color:black;font-weight:bold;}
td:hover{ cursor:hand}
</style>
</head>
<body>
<div>
<input id="sum" type="text" readonly="readonly"/>
<input id="del" type="button" value="DEL" onclick="del()"/>
<input type="button" value="C" onclick="C()" id="c"/>
<table cellspacing="20px">
<tr>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">1</td>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">2</td>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">3</td>
<td onclick="iv(this),sum()" onmouseover="change(this)" onmouseout="out(this)">+</td>
</tr>
<tr>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">4</td>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">5</td>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">6</td>
<td onclick="iv(this),sum()" onmouseover="change(this)" onmouseout="out(this)">-</td>
</tr>
<tr>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">7</td>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">8</td>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">9</td>
<td onclick="iv(this),sum()" onmouseover="change(this)" onmouseout="out(this)">x</td>
</tr>
<tr>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">0</td>
<td onclick="iv(this)" onmouseover="change(this)" onmouseout="out(this)">.</td>
<td onclick="iv(this),sum(),deng()" onmouseover="change(this)" onmouseout="out(this)">=</td>
<td onclick="iv(this),sum()" onmouseover="change(this)" onmouseout="out(this)">÷</td>
</tr>
</table>
</div>
<script type="text/javascript">
function C(){document.getElementById('sum').value=""};
var arr=new Array();
function iv(n){
arr=document.getElementById('sum').value.split("");
arr.push(n.innerHTML);
document.getElementById("sum").value=arr.join('');
if(arr[0]=="x"||arr[0]=="÷"){
document.getElementById("sum").value="别乱点！";
setTimeout(C,1000);
}
}
function del(){
var va=document.getElementById('sum').value;
document.getElementById('sum').value=va.substring(0,(va.length)-1);
}
function sum(){
var str=document.getElementById('sum').value;
var num;
if(str.indexOf('+',1)!=-1&&str.indexOf('+',1)!=str.length-1){
var c=str.substring(str.length-1);
var sub=str.indexOf('+',1);
arr=str.split('');
arr.splice(sub,1,'a');
str1=arr.join('');
arr1=str1.split('a');
num=parseFloat(arr1[0])+parseFloat(arr1[1]);
document.getElementById('sum').value=num+c;
}
else if(str.indexOf('-',1)!=-1&&str.indexOf('-',1)!=str.length-1){
var c=str.substring(str.length-1);
var sub=str.indexOf('-',1);
arr=str.split('');
arr.splice(sub,1,'a');
str1=arr.join('');
arr1=str1.split('a');
num=parseFloat(arr1[0])-parseFloat(arr1[1]);
document.getElementById('sum').value=num+c;
}
else if(str.indexOf('x',1)!=-1&&str.indexOf('x',1)!=str.length-1){
var c=str.substring(str.length-1);
var sub=str.indexOf('x',1);
arr=str.split('');
arr.splice(sub,1,'a');
str1=arr.join('');
arr1=str1.split('a');
num=parseFloat(arr1[0])*parseFloat(arr1[1]);
document.getElementById('sum').value=num+c;
}
else if(str.indexOf('÷',1)!=-1&&str.indexOf('÷',1)!=str.length-1){
var c=str.substring(str.length-1);
var sub=str.indexOf('÷',1);
arr=str.split('');
arr.splice(sub,1,'a');
str1=arr.join('');
arr1=str1.split('a');
num=parseFloat(arr1[0])/parseFloat(arr1[1]);
document.getElementById('sum').value=num+c;
}
}
function deng(){
var v=document.getElementById('sum').value;
document.getElementById('sum').value=v.substring(0,v.length-1);
}
function change(t){
t.style.backgroundColor="#FFD700";
t.style.fontSize="22px";
}
function out(t){
t.style.backgroundColor="red";
t.style.fontSize="20px";
}
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » JavaScript写的一个计算器