先来看一下效果吧
<!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>Document</title>
<style>
body {
/* 设置容器尺寸 - 原理1 */
width: 100%;
height: 100%;
/* 背景渐变色 - 原理2 */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
/* 背景尺寸 - 原理3 */
background-size: 600% 600%;
/* 循环动画 - 原理4 */
animation: gradientBG 20s ease infinite;
}
/* 动画，控制背景 background-position */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.calculator {
box-shadow: 2px 2px 11px 10px lightblue;
margin-top: 20px;
height: 617px;
background-color: #efefef;
width: 500px;
margin: 0 auto;
}
.title {
font-family: 'Courier New', Courier, monospace;
font-size: 40px;
text-align: center;
width: 100%;
margin-bottom: 20px;
}
.screen {
position: relative;
height: 100px;
margin: 0 20px 20px 20px;
background-color: #efefef;
border: 2px solid #757373;
box-shadow: -1px 3px 22px -5px #333;
}
.pw {
display: flex;
}
.leftpw {
display: flex;
flex-wrap: wrap;
height: 500px;
width: 400px;
}
.rightpw {
background-color: #efefef;
height: 457px;
width: 130px;
margin-right: 20px;
}
.itemnum {
height: 80px;
width: 90px;
background-color: #ee7752;
margin-left: 20px;
text-align: center;
line-height: 80px;
font-size: 38px;
font-weight: 800;
box-shadow: -1px 5px 13px -5px #333;
}
.pushdown {
box-shadow: 6px 8px 13px 1px #333;
transform: translate(-3px, -3px);
}
.symbol {
width: 100%;
height: 98px;
/* 背景渐变色 - 原理2 */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
/* 背景尺寸 - 原理3 */
background-size: 600% 600%;
/* 循环动画 - 原理4 */
animation: gradientBG 20s ease infinite;
margin-bottom: 20px;
text-align: center;
line-height: 98px;
font-size: 65px;
font-weight: 600;
box-shadow: -1px 5px 13px -5px #333;
}
.input {
float: left;
position: absolute;
left: 20px;
top: 10px;
}
.output {
float: right;
position: absolute;
bottom: 20px;
right: 20px;
font-size: 40px;
}
</style>
</head>
<body>
<div class="title">简易计算器</div>
<!-- 计算器的外部布局 -->
<div class="calculator">
<!-- 计算器的显示区域 -->
<!-- 占位符号 -->
<div style="height: 20px;"></div>
<!-- 荧幕区域 -->
<div class="screen">
<!-- 输入区域 -->
<div class="input"></div>
<!-- 输出区域 -->
<div class="output"></div>
</div>
<!-- 按键区域 -->
<div class="pw">
<!-- 左边按键区域 -->
<div class="leftpw">
<div class="itemnum">1</div>
<div class="itemnum">2</div>
<div class="itemnum">3</div>
<div class="itemnum">4</div>
<div class="itemnum">5</div>
<div class="itemnum">6</div>
<div class="itemnum">7</div>
<div class="itemnum">8</div>
<div class="itemnum">9</div>
<div class="itemnum">0</div>
<div class="itemnum" onclick="getpoint()">.</div>
<div class="itemnum" onclick="getequals()">=</div>
</div>
<!-- 右边案件区域 -->
<div class="rightpw">
<div class="symbol">+</div>
<div class="symbol">-</div>
<div class="symbol">×</div>
<div class="symbol">÷</div>
</div>
</div>
</div>
</body>
<script>
// 定义存放元素的数组,然后把元素push进去，然后用数组的join()方法来转化为字符串的操作
var expression = []
// 循环绑定给每个字母绑定事件，然后定时器过一段时间后去掉时间
// 获取
const items = document.querySelectorAll('.itemnum')
// items.forEach(element => {
// element.addEventListener('click',function () {
// console.log("点击到了");
// })
// });
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function () {
// if (i + 1 == 11) {
// expression.push('.')
// }
// if (i + 1 == 12) {
// expression.push('=')
// }
//在按下按键的时候应该有一个按压的效果，按下的时候先给模糊背景，然后将元素下移动，然后定时器让一秒一后往上移，同时清楚阴影效果
items[i].classList.add('pushdown')
setTimeout(() => {
items[i].classList.remove('pushdown')
}, 700);
if (i < 10) {
if (i + 1 !== 10) {
expression.push(i + 1)
} else {
expression.push(0)
}
console.log(expression.join(''));
document.querySelector('.input').innerHTML = expression.join('')
}
})
}
// 获取加减乘除信号
const symbols = document.querySelectorAll('.symbol')
// 循环遍历添加事件
for (let i = 0; i < symbols.length; i++) {
symbols[i].addEventListener('click', function () {
symbols[i].classList.add('pushdown')
setTimeout(() => {
symbols[i].classList.remove('pushdown')
}, 700);
if (symbols[i].innerHTML == '+') {
console.log("调用了")
expression.push('+')
document.querySelector('.input').innerHTML = expression.join('')
}
if (symbols[i].innerHTML == '-') {
console.log("调用了")
expression.push('-')
document.querySelector('.input').innerHTML = expression.join('')
}
if (symbols[i].innerHTML == '×') {
console.log("调用了")
expression.push('*')
document.querySelector('.input').innerHTML = expression.join('')
}
if (symbols[i].innerHTML == '÷') {
console.log("调用了")
expression.push('/')
document.querySelector('.input').innerHTML = expression.join('')
}
console.log(expression);
})
}
function calculator() {
var answer = expression.join('')
console.log(eval(answer));
document.querySelector('.output').innerHTML = eval(answer)
}
function getpoint() {
expression.push('.')
}
function getequals() {
calculator()
expression = []
}
</script>
</html>