上一篇
html如何写一个计算器
要创建一个HTML计算器，你需要使用HTML、CSS和JavaScript，以下是详细步骤：
1、创建HTML结构
我们需要创建一个包含输入框和按钮的HTML结构，这将是计算器的界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>简易计算器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" class="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendOperator('')"></button>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="appendOperator('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendOperator('/')">/</button>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
2、编写CSS样式
接下来，我们需要为计算器添加一些样式，在styles.css文件中添加以下代码：
body {
display: flex;
justifycontent: center;
alignitems: center;
height: 100vh;
margin: 0;
fontfamily: Arial, sansserif;
}
.calculator {
border: 1px solid #ccc;
borderradius: 5px;
padding: 1rem;
backgroundcolor: #f0f0f0;
}
.display {
width: 100%;
marginbottom: 0.5rem;
textalign: right;
}
.buttons {
display: grid;
gridtemplatecolumns: repeat(4, 1fr);
gap: 0.5rem;
}
button {
border: none;
backgroundcolor: #fff;
fontsize: 1.2rem;
padding: 0.5rem;
borderradius: 5px;
cursor: pointer;
}
button:hover {
backgroundcolor: #eee;
}
3、编写JavaScript代码
我们需要编写JavaScript代码来处理计算器的功能，在scripts.js文件中添加以下代码：
const display = document.querySelector('.display');
let currentInput = '';
let operator = null;
let firstOperand = '';
let waitingForSecondOperand = false;
function appendNumber(number) {
if (waitingForSecondOperand === true) {
display.value = number;
waitingForSecondOperand = false;
} else {
display.value = display.value === '0' ? number : display.value + number;
}
currentInput += number;
}
function appendOperator(op) {
if (operator !== null) calculateResult();
firstOperand = currentInput;
operator = op;
waitingForSecondOperand = true;
}
function clearDisplay() {
display.value = '0';
currentInput = '';
operator = null;
firstOperand = '';
waitingForSecondOperand = false;
}
function calculateResult() {
let result;
switch (operator) {
case '+':
result = parseFloat(firstOperand) + parseFloat(currentInput);
break;
case '':
result = parseFloat(firstOperand) parseFloat(currentInput);
break;
case '*':
result = parseFloat(firstOperand) * parseFloat(currentInput);
break;
case '/':
result = parseFloat(firstOperand) / parseFloat(currentInput);
break;
default:
return;
}
display.value = result;
currentInput = result.toString();
operator = null;
waitingForSecondOperand = true;
}
现在，你可以在浏览器中打开HTML文件，看到一个简易的计算器，你可以点击数字和操作符进行计算。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/282876.html
