好的，我可以为您提供一个简单的HTML、JS和
CSS实现的
计算器。以下是完整的
代码：
HTML
代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
计算器</title>
<link rel="stylesheet" href="style.
css">
</head>
<body>
<div class="calculator">
<div class="display">
<p id="result">0</p>
</div>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="deleteDigit()">DEL</button>
<button onclick="addToDisplay('/')">÷</button>
<button onclick="addToDisplay('*')">x</button>
<button onclick="addToDisplay('7')">7</button>
<button onclick="addToDisplay('8')">8</button>
<button onclick="addToDisplay('9')">9</button>
<button onclick="addToDisplay('-')">-</button>
<button onclick="addToDisplay('4')">4</button>
<button onclick="addToDisplay('5')">5</button>
<button onclick="addToDisplay('6')">6</button>
<button onclick="addToDisplay('+')">+</button>
<button onclick="addToDisplay('1')">1</button>
<button onclick="addToDisplay('2')">2</button>
<button onclick="addToDisplay('3')">3</button>
<button class="equals" onclick="calculate()">=</button>
<button onclick="addToDisplay('0')">0</button>
<button onclick="addToDisplay('.')">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码：
```
css
body {
background-color: #f5f5f5;
font-family: 'Lato', sans-serif;
}
.calculator {
margin: 50px auto;
width: 300px;
background-color: #e8e8e8;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.display {
padding: 10px;
background-color: #fff;
border-radius: 10px 10px 0 0;
text-align: right;
}
.display p {
font-size: 24px;
margin: 0;
padding: 0;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
padding: 10px;
}
button {
font-size: 24px;
padding: 10px;
border-radius: 5px;
background-color: #fff;
border: none;
cursor: pointer;
}
.equals {
background-color: #FFD700;
}
```
JS
代码：
```js
let display = document.getElementById('result');
let expression = '';
function addToDisplay(value) {
expression += value;
display.innerHTML = expression;
}
function clearDisplay() {
expression = '';
display.innerHTML = '0';
}
function deleteDigit() {
expression = expression.slice(0, -1);
display.innerHTML = expression;
}
function calculate() {
let result = eval(expression);
expression = result.toString();
display.innerHTML = result;
}
```
这个
计算器可以进行基本的加、减、乘、除操作，同时还具备清空、删除和
计算等功能。您可以在浏览器中打开HTML文件，即可使用这个
计算器。
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
