使用js完成一个功能相对完整的计算器
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>在线简易计算器</title>
</head>
<style>
table{
width:300px;
height:400px;
margin:100px auto;
border-collapse: collapse;
}
table tr td{
border:1px solid black;
}
table tr td a{
text-decoration-line: none;
width:50px;
height:50px;
line-height: 50px;
margin:0 auto;
text-align: center;
display: block;
border-radius: 100%;
border: 1px solid black;
background-color: coral;
color:white;
}
table tr td p{
padding:5px;
font-size: 1.5rem;
text-align: center;
}
caption{
padding-bottom: 20px;
}
span{
padding :20px;
}
</style>
<body>
<div>
<table>
<caption>简易计算器
<span><button >清空</button></span>
</caption><tr>
<td colspan="4" id="result" style="height:100px"><p></p></td>
</tr>
<tr>
<td><a href="">7</a></td>
<td><a href="">8</a></td>
<td><a href="">9</a></td>
<td><a href="">÷</a></td>
</tr>
<tr>
<td><a href="">4</a></td>
<td><a href="">5</a></td>
<td><a href="">6</a></td>
<td><a href="">×</a></td>
</tr>
<tr>
<td><a href="">1</a></td>
<td><a href="">2</a></td>
<td><a href="">3</a></td>
<td><a href="">-</a></td>
</tr>
<tr>
<td><a href="">.</a></td>
<td><a href="">0</a></td>
<td><a href="">+</a></td>
<td><a href="">=</a></td>
</tr>
</table>
</div>
</body>
<script>
let Num = document.getElementsByTagName('a');//获取所有A标签
let res = document.getElementsByTagName('p')[0];
let data1 = '';
let data2 = '';
let opt ='';
let result ='';
let hasPoint = false;
let lastkey = '';
let button =document.getElementsByTagName('button')[0];
button.onclick=function(){
res.innerHTML='';
data1 = '';
data2 = '';
hasPoint = false;
}
function calculate(opt){//进行运算
switch (opt) {
case '+':
result = parseFloat(data1) + parseFloat(data2);
break;
case '-':
result = parseFloat(data1) - parseFloat(data2);
break;
case '×':
result = parseFloat(data1) * parseFloat(data2);
break;
case "÷":
if (parseFloat(data2) === 0) {
alert('除数不能为零');
return false;
} else {
result = parseFloat(data1) / parseFloat(data2);
// 四舍五入,仅保留二位小数
result = Math.round(result * 100) / 100;
}
break;
}
res.innerHTML=data1+opt+data2+'='+result;
}
for(let i=0;i<Num.length;i++)
{
Num[i].onclick = function () {
let key = Num[i].innerHTML;
console.log('上次的键:',lastkey);
if(lastkey ==='='){
res.innerHTML = '';
data1 = '';
data2 = '';
opt ='';
lastkey = '';
}
if (!isNaN(key) || key === '.')//如果输入数字或者 小数点
{
if (hasPoint && key === '.') {//如果前一个输入的是.,再输入. 会直接返回,不做改变
console.log('已存在小数点');
return false;
} else if (isNaN(res.innerHTML)) {
console.log(key,'3');
if(key === '.'){
hasPoint = true;
}
data2 += key;
res.innerHTML += key;
lastkey = key;
return false;
} else {
if(key === '.'){
hasPoint = true;
}
console.log(key,'4');
res.innerHTML += key;
lastkey = key;
return false;
}
}
else{//如果输入加减乘除
if(isNaN(res.innerHTML)){//如果结果中已有加减乘除
if(key==='='){
calculate(opt);
lastkey = key;
return false;
}else if(isNaN(lastkey)){
opt = key;
hasPoint = false;
res.innerHTML = data1+opt;
return false;
}else{
console.log('已清除上次键');
return false;
}
}else{
data1 += res.innerHTML;
opt = key;
hasPoint = false;
res.innerHTML += key;
lastkey = key;
return false;
}
}
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
