利用css+js制作简易版计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易计算器</title>
<style>
.box{
margin:0 auto;
width: 300px;
margin-top: 200px;
border: 1px solid red;
}
.display{
width: 100%;
height: 80PX;
background: rgb(240, 234, 234);
}
.content{
width: 100%;
height: 50%;
display: flex;
justify-content: right;
align-items: end;
}
.content>span{
font-size:24px;
font-weight: bold;
}
.btn{
margin-top: 20px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content:center;
box-sizing: border-box;
}
.lattice{
width: 24%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgb(242, 218, 218,.4);
cursor: pointer;
font-weight: bold;
}
.lattice:hover{
background: #ccc;
}
.color1{
background: rgb(240, 234, 234);
}
.color2{
background: rgb(154, 183, 244);
}
</style>
</head>
<body>
<div class="box">
<section class="display">
<div class="content">
<span id="text"></span>
</div>
<div class="content">
<span id="result">0</span>
</div>
</section>
<section class="btn">
<div class="lattice"></div>
<div class="lattice"></div>
<div class="lattice"></div>
<div class="lattice color1" onClick="btn('c')">清除</div>
<div class="lattice" onClick="btn(1)">1</div>
<div class="lattice" onClick="btn(2)">2</div>
<div class="lattice" onClick="btn(3)">3</div>
<div class="lattice color1" onClick="btn('+')">+</div>
<div class="lattice" onClick="btn(4)">4</div>
<div class="lattice" onClick="btn(5)">5</div>
<div class="lattice" onClick="btn(6)">6</div>
<div class="lattice color1" onClick="btn('-')">-</div>
<div class="lattice" onClick="btn(7)">7</div>
<div class="lattice" onClick="btn(8)">8</div>
<div class="lattice" onClick="btn(9)">9</div>
<div class="lattice color1" onClick="btn('*')">*</div>
<div class="lattice" onClick="btn('.')">.</div>
<div class="lattice" onClick="btn(0)">0</div>
<div class="lattice color1" onClick="btn('/')">/</div>
<div class="lattice color2" onClick="btn('=')">=</div>
</section>
</div>
<script>
var textId = document.getElementById('text');
var resId = document.getElementById('result');
var isClickOperator = false; // 用于区分是否点击了运算符
var number = 0; // 第一个数
var operator = ''; // 运算符
function btn(str)
{
if(str == '+' || str == '-' || str == '*' || str == '/'){
number = resId.innerHTML;
textId.innerHTML = resId.innerHTML + str;
operator = str;
isClickOperator = true;
} else if (str == 'c') {
location.reload(); // 刷新页面
}else if(str == '='){
textId.innerHTML = number + operator + resId.innerHTML + '=';
switch (operator) {
case '+':
resId.innerHTML = Number(number) + Number(resId.innerHTML);
break;
case '-':
resId.innerHTML = Number(number) - Number(resId.innerHTML);
break;
case '*':
resId.innerHTML = Number(number) * Number(resId.innerHTML);
break;
case '/':
if(resId.innerHTML == 0){
alert('被除数不能为0');
location.reload();
return;
}
resId.innerHTML = Number(number) / Number(resId.innerHTML);
break;
}
}else if(str == '.'){
// 判断是否有小数点
if ((resId.innerHTML.toString()).indexOf(".") != -1) {
return;
}
resId.innerHTML += str;
}else{
if(isClickOperator){
resId.innerHTML = '';
isClickOperator = false;
}
if(resId.innerHTML == 0 && (resId.innerHTML.toString()).indexOf(".") == -1){
resId.innerHTML = '';
}
resId.innerHTML += str;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例