一、效果截图
二、注意事项
1、html结构上，分为三个部分：显示区、按钮区、底部白条
2、css样式上
- 需要解决外边距重叠的问题，可用overflow: hidden;
- 点击高亮效果，可用 filter: brightness(160%)
3、js
- 绑定点击事件的时候，用事件委托，提高整体性能，如果点击的不是按钮，则return（具体看代码）
- 用switch···case···处理功能按钮处理方法
- flag表示输入是否输入首次输入
- 转化位百分比的按钮因为需要涉及到小数,所以要用parseFloat方法来将innerHTML转化为浮点数再来进行计算
- eval函数的使用
三、源码实现
1、html
<!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>
<link rel="stylesheet" href="./index.css" rel="external nofollow" />
</head>
<body>
<div id="calculator">
<!-- 显示区 -->
<div class="screen">
<h1>0</h1>
</div>
<!-- 按钮区 -->
<div class="buttons">
<button class="btn btn1" data-type="handel">AC</button>
<button class="btn btn1" data-type="handel"> /-</button>
<button class="btn btn1" data-type="handel">%</button>
<button class="btn btn2" data-type="handel">÷</button>
<button class="btn btn3">7</button>
<button class="btn btn3">8</button>
<button class="btn btn3">9</button>
<button class="btn btn2" data-type="handel">×</button>
<button class="btn btn3">4</button>
<button class="btn btn3">5</button>
<button class="btn btn3">6</button>
<button class="btn btn2" data-type="handel">-</button>
<button class="btn btn3">1</button>
<button class="btn btn3">2</button>
<button class="btn btn3">3</button>
<button class="btn btn2" data-type="handel"> </button>
<button class="btn btn3 btn0">0</button>
<button class="btn btn3" data-type="handel">.</button>
<button class="btn btn3" data-type="handel">=</button>
</div>
<!-- 底部白条 -->
<div class="bar"></div>
</div>
<script src="./index.js"></script>
</body>
</html>2、css
* {
padding: 0;
margin: 0;
}
/* 设置计算器的整体样式 */
#calculator {
width: 330px;
/* height: 590px; */
background-color: black;
margin: 30px auto;
border-radius: 40px;
/*解决外边距重叠问题 */
overflow: hidden;
}
/* 设置显示区 */
.screen {
height: 200px;
width: 100%;
color: white;
position: relative;
}
.screen>h1 {
position: absolute;
bottom: 10px;
right: 35px;
font-size: 42px;
}
/* 设置按钮 */
.buttons {
width: 100%;
padding: 0 10px;
}
.buttons>.btn {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #333333;
border: none;
margin: 10px 6px;
color: #fff;
font-size: 25px;
font-weight: bold;
}
/* 设置点击高亮效果 */
.buttons>.btn:active {
filter: brightness(160%);
}
.buttons>.btn1 {
background-color: #ccc;
color: black;
}
.buttons>.btn2 {
background-color: #d6b040;
}
.buttons>.btn0 {
width: 130px;
border-radius: 26px;
}
/* 设置白条 */
.bar {
width: 110px;
height: 3px;
background-color: white;
border-radius: 1px;
margin: 20px auto 15px;
}3、js
const buttons = document.querySelector(".buttons");
const screen = document.querySelector(".screen h1");
var flag = 1; //设置标志性，表示第一次输入
buttons.addEventListener("click", (e) => {
const text = e.target.innerHTML;
// 如果点击的不是按钮，则return
if (e.target.className == "buttons") return;
handel(text);
});
// 操作符
function handel(text) {
switch (text) {
case "AC": //清除
screen.innerHTML = "0";
flag = 1;
break;
case " /-": //取正反值
if (screen.innerHTML[0] == "-") {
screen.innerHTML = screen.innerHTML.slice(1);
} else {
screen.innerHTML = "-" screen.innerHTML;
}
break;
case "%": //取百分比
screen.innerHTML = parseFloat(screen.innerHTML) / 100;
break;
case "÷": //除法
if (flag) {
screen.innerHTML = "/";
flag = 0;
break;
} else {
screen.innerHTML = "/";
flag = 0;
break;
}
case "×": //乘法
if (flag) {
screen.innerHTML = "*";
flag = 0;
break;
} else {
screen.innerHTML = "*";
flag = 0;
break;
}
case "-": //减法
if (flag) {
screen.innerHTML = "-";
flag = 0;
break;
} else {
screen.innerHTML = "-";
flag = 0;
break;
}
case " ": //加法
if (flag) {
screen.innerHTML = " ";
flag = 0;
break;
} else {
screen.innerHTML = " ";
flag = 0;
break;
}
case "=": //等于
if (flag) {
screen.innerHTML = screen.innerHTML;
flag = 1;
break;
} else {
screen.innerHTML = eval(screen.innerHTML);
flag = 1;
break;
}
default:
if (flag) {
screen.innerHTML = text;
flag = 0;
break;
} else {
if (screen.innerHTML.length < 8) {
screen.innerHTML = text;
} else {
return;
}
flag = 0;
}
}
}到此这篇关于基于HTML JS实现网页版苹果计算器的文章就介绍到这了,更多相关JS苹果计算器内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！