一、效果截图
二、注意事项
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;
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苹果计算器内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
