要创建一个HTML计算器，你需要使用HTML、CSS和JavaScript，以下是详细步骤：

html如何写一个计算器html如何写一个计算器（图片来源网络，侵删）

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文件，看到一个简易的计算器，你可以点击数字和操作符进行计算。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。