下面我将详细讲解如何基于html+css+js实现简易计算器代码实例。
HTML部分
首先，我们需要创建一个HTML页面，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="screen">
<p id="result"></p>
</div>
<div class="row">
<button onclick="buttonClick('7')">7</button>
<button onclick="buttonClick('8')">8</button>
<button onclick="buttonClick('9')">9</button>
<button onclick="buttonClick('/')">÷</button>
</div>
<div class="row">
<button onclick="buttonClick('4')">4</button>
<button onclick="buttonClick('5')">5</button>
<button onclick="buttonClick('6')">6</button>
<button onclick="buttonClick('*')">×</button>
</div>
<div class="row">
<button onclick="buttonClick('1')">1</button>
<button onclick="buttonClick('2')">2</button>
<button onclick="buttonClick('3')">3</button>
<button onclick="buttonClick('-')">-</button>
</div>
<div class="row">
<button onclick="buttonClick('0')">0</button>
<button onclick="buttonClick('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="buttonClick('+')">+</button>
</div>
<div class="row">
<button onclick="clearScreen()">清屏</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
其中，我们创建了一个class为container的外层容器，里面包含一个id为result的p标签，用于显示计算器的计算结果。之后是四个class为row的行，每行包含了4个数字和运算符按钮，以及一个清除按钮。
CSS部分
接下来，我们需要为计算器样式添加CSS，代码如下：
.container {
margin: 100px auto;
width: 300px;
height: 400px;
background: #F5F5F5;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}
.screen {
height: 80px;
background: white;
border-radius: 5px;
margin-bottom: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 20px;
font-size: 32px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
button {
width: 70px;
height: 70px;
margin-right: 10px;
border: none;
border-radius: 5px;
background: white;
color: #333;
font-size: 24px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
button:hover {
background: #F5F5F5;
}
.row:last-child button {
background: #F5F5F5;
color: #333;
}
.row:last-child button:hover {
background: #efefef;
}
CSS部分主要是为计算器组件添加样式，包括容器的大小与外观（居中，背景色、圆角、阴影等），屏幕部分的样式（显示结果，背景，圆角、阴影等），按钮样式，以及按钮的颜色状态等。
JS部分
最后，我们需要添加JavaScript代码，来实现计算器的功能。代码如下：
let result = document.getElementById('result');
function buttonClick(buttonValue) {
result.innerText += buttonValue;
}
function clearScreen() {
result.innerText = '';
}
function calculate() {
try {
result.innerText = eval(result.innerText);
} catch (error) {
alert(error);
clearScreen();
}
}
JS部分主要包括三个函数buttonClick、clearScreen、calculate，分别用于处理按钮被点击时的逻辑、清空屏幕内容、计算结果的逻辑处理（通过eval函数来计算屏幕内容的结果），并且处理了计算报错的异常情况。
示例1：输入1+2，得到结果为3
示例2：输入10/5，得到结果为2
这就是基于html+css+js实现简易计算器的完整攻略，包括HTML部分、CSS部分和JS部分。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！