7.29-bug计算器
<!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>
.wrapper{
width: 200px;
height: 350px;
background-color: rgb(65, 65, 65);
margin: auto ;
border-radius: 10px;
/* overflow: hidden; */
}
.system{
width: 100%;
height: 20px;
padding-top: 6px;
padding-left: 5px;
}
.sbtn{
width: 12px;
height: 12px;
background-color: rgb(92, 92, 92);
border-radius: 50%;
float: left;
margin: 2px;
}
.sbtn:hover{
background-color: red;
}
.display{
width: 100%;
height: 80px;
color: white;
font-size: 32px;
text-align: right;
line-height: 100px;
padding: 0 10px;
box-sizing: border-box;
/* vertical-align: bottom; */
}
.control{
width: 100%;
height: 250px;
color: white;
}
.control-button{
width: 25%;
height: 20%;
float: left;
text-align: center;
line-height: 50px;
background-color: rgb(113, 113, 113);
border: 1px solid rgb(65, 65, 65);
box-sizing: border-box;
}
.control-button:hover{
background-color: yellow;
}
/* .control-button:active{
} */
.o1{
background-color: rgb(85, 85, 85);
}
.o2{
background-color: rgb(255, 157, 0);
}
.b2{
width: 50%;
}
.left-bottom{
border-bottom-left-radius: 10px;
}
.right-bottom{
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<!-- .wrapper>.system+.display+.control -->
<!-- .wrapper>(.system>.sbtn*3)+.display+(.control>.control-button*19) -->
<div class="wrapper">
<div class="system">
<div class="sbtn"></div>
<div class="sbtn"></div>
<div class="sbtn"></div>
</div>
<div class="display"></div>
<div class="control">
<div class="control-button o1" onclick="acClick(this)">AC</div>
<div class="control-button o1">+/-</div>
<div class="control-button o1">%</div>
<div class="control-button o2" onclick="operatorClick(this)">/</div>
<div class="control-button" onclick="numberClick(this)">7</div>
<div class="control-button" onclick="numberClick(this)">8</div>
<div class="control-button" onclick="numberClick(this)">9</div>
<div class="control-button o2" onclick="operatorClick(this)">*</div>
<div class="control-button" onclick="numberClick(this)">4</div>
<div class="control-button" onclick="numberClick(this)">5</div>
<div class="control-button" onclick="numberClick(this)">6</div>
<div class="control-button o2" onclick="operatorClick(this)">-</div>
<div class="control-button" onclick="numberClick(this)">1</div>
<div class="control-button" onclick="numberClick(this)">2</div>
<div class="control-button" onclick="numberClick(this)">3</div>
<div class="control-button o2" onclick="operatorClick(this)">+</div>
<div class="control-button b2 left-bottom" onclick="numberClick(this)">0</div>
<div class="control-button">.</div>
<div class="control-button o2 right-bottom" onclick="equalClick(this)">=</div>
</div>
</div>
<script>
let firstNumber = 0;
let buttonType = 0;
let operatorType = "+";
//三种选择方法
let display = document.getElementsByClassName('display')[0];//通过 标签 id 等
// let display = document.querySelectorAll('.display')[0];//
// let display = document.querySelector('.display');//只会命中第一个找到的数据 另外的都会选择所有
function numberClick(button){
console.log(button.innerText)//innerHTML会把所有标签结构打出来.innerText只会取内容.
if(buttonType == 0){
display.innerText += button.innerText;
}else{
display.innerText = button.innerText;
}
buttonType == 0;
}
function operatorClick(button){
console.log("1")
firstNumber = display.innerText;
buttonType = 1;
operatorType = button.innerText;
}
function equalClick(button){
console.log("1")
let result = 0;
firstNumber = parseInt(firstNumber);
secondNumber = parseInt(display.innerText);
expression = 'result = firstNumber' + operatorType + 'secondNumber';
eval(expression);//字符串作为代码运行
display.innerText = result;
buttonType = 1;
}
function acClick(button){
firstNumber = 0;
buttonType = 0;
operatorType = '+';
display.innerText = '';
}
</script>
</body>
</html>
