HTML怎么编写计算器
在网页开发中，我们经常需要实现一些交互功能，其中之一就是计算器，HTML提供了丰富的标签和属性，可以帮助我们轻松地创建一个简单的计算器，本文将介绍如何使用HTML编写一个基本的计算器。
1、创建HTML结构
我们需要创建一个HTML文件，并在其中添加基本的HTML结构，这包括DOCTYPE声明、html、head和body标签，在head标签中，我们可以添加一些元数据，如字符集和标题，在body标签中，我们将添加计算器的主要内容。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<!-计算器的代码将放在这里 -->
</body>
</html>
2、添加输入框和按钮
接下来，我们需要在body标签中添加输入框和按钮，我们可以使用input标签来创建输入框，并为其添加type属性，以便用户可以在其中输入数字，我们可以使用button标签来创建按钮，并为它们添加onclick属性，以便在用户点击时执行相应的操作。
<body>
<input type="text" id="display" readonly>
<br>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<br>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<br>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<br>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendOperator('/')">/</button>
</body>
3、添加JavaScript代码
为了实现计算器的功能，我们需要添加一些JavaScript代码，我们需要定义一些变量，如当前显示的数字、操作符和结果，我们需要为每个按钮添加事件监听器，以便在用户点击时执行相应的操作，我们需要实现一些函数，如清除显示、追加数字、追加操作符和计算结果。
<script>
let currentNumber = '';
let currentOperator = '';
let result = null;
let isCurrentNumber = true;
let isCurrentOperator = false;
let isResult = false;
function clearDisplay() {
currentNumber = '';
currentOperator = '';
result = null;
document.getElementById('display').value = '';
isCurrentNumber = true;
isCurrentOperator = false;
isResult = false;
}
function appendNumber(number) {
if (isCurrentNumber) {
currentNumber += number;
document.getElementById('display').value = currentNumber;
} else if (isCurrentOperator || isResult) {
clearDisplay();
currentNumber = number;
document.getElementById('display').value = currentNumber;
} else {
currentNumber += number;
document.getElementById('display').value = currentNumber;
}
isCurrentNumber = false;
isCurrentOperator = true;
isResult = false;
}
function appendOperator(operator) {
if (isCurrentOperator && result === null) {
currentOperator = operator;
} else if (!isCurrentOperator && result !== null) {
calculateResult();
} else if (!isCurrentOperator && result === null) {
clearDisplay();
currentOperator = operator;
} else {
clearDisplay();
currentOperator = operator;
}
isCurrentNumber = true;
isCurrentOperator = false;
isResult = false;
}
function calculateResult() {
if (currentNumber !== '' && currentOperator !== '') {
result = eval(currentNumber + ' ' + currentOperator);
document.getElementById('display').value = result;
currentNumber = result.toString();
currentOperator = '';
isCurrentNumber = true;
isCurrentOperator = false;
isResult = true;
} else {
alert('请先输入数字和操作符');
}
}
</script>
至此，我们已经完成了一个简单的计算器的编写，用户可以在输入框中输入数字和操作符，然后点击等号按钮来计算结果，点击C按钮可以清除显示，点击加减乘除按钮可以追加相应的操作符。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/241581.html
微信扫一扫 