怎么用html编计算器的程序

使用HTML编写计算器需要结合HTML、CSS和JavaScript三种技术，HTML用于构建计算器的结构和元素，CSS用于美化计算器的外观，而JavaScript则负责实现计算器的功能，以下是创建一个基础计算器的步骤：

1. 构建HTML结构

我们需要创建计算器的界面，这包括显示屏和按钮，一个简单的计算器通常包含数字0-9、小数点、加减乘除等基本运算符，以及清除（C）、退格（CE）和等于（=）等特殊功能键。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" readonly>
        <div class="buttons">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>/</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>*</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>-</button>
            <button>0</button>
            <button>.</button>
            <button>C</button>
            <button>+</button>
            <button class="equals" >=</button>
        </div>
    </div>
<script src="script.js"></script>
</body>
</html>

2. 添加CSS样式

接下来，我们需要为计算器添加一些基本的样式来美化它，你可以根据个人喜好自定义颜色、字体和布局等。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: f0f0f0;
}
.calculator {
    border: 1px solid ccc;
    border-radius: 5px;
    padding: 1rem;
    background-color: fff;
}
.display {
    width: 100%;
    margin-bottom: 1rem;
    text-align: right;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
button {
    border: none;
    background-color: eee;
    padding: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}
button:hover {
    background-color: ddd;
}
.equals {
    grid-column: span 2;
    background-color: f0a500;
    color: white;
}

3. 编写JavaScript逻辑

最后一步是使用JavaScript来实现计算器的逻辑，我们需要处理用户点击按钮时的行为，执行相应的数学操作，并更新显示屏的内容。

// script.js
const display = document.querySelector('.display');
const buttons = document.querySelectorAll('button');
let operand1 = '';
let operand2 = '';
let operator = null;
let firstOperandEntered = false;
let shouldReset = false;
function updateDisplay() {
    display.value = operand1 + operator + operand2;
}
buttons.forEach(button => {
    button.addEventListener('click', () => {
        if (button.classList.contains('equals')) {
            switch (operator) {
                case '+':
                    operand2 = parseFloat(operand2) + parseFloat(operand1);
                    break;
                case '-':
                    operand2 = parseFloat(operand1) parseFloat(operand2);
                    break;
                case '*':
                    operand2 = parseFloat(operand1) * parseFloat(operand2);
                    break;
                case '/':
                    operand2 = parseFloat(operand1) / parseFloat(operand2);
                    break;
                default:
                    return;
            }
            firstOperandEntered = true;
            shouldReset = true;
            updateDisplay();
        } else if (button.classList.contains('C')) {
            operand1 = '';
            operand2 = '';
            operator = null;
            firstOperandEntered = false;
            shouldReset = false;
            updateDisplay();
        } else if (button.classList.contains('CE')) {
            if (!shouldReset) {
                operand1 = operand1.slice(0, -1);
                if (operand1 === '') {
                    firstOperandEntered = false;
                }
            } else {
                operand2 = operand2.slice(0, -1);
            }
            updateDisplay();
        } else {
            const digit = button.innerText;
            if (firstOperandEntered && digit === '.') return; // Prevent multiple decimal points
            if (!shouldReset) {
                operand1 += digit;
            } else {
                operand2 += digit;
                shouldReset = false;
            }
            updateDisplay();
        }
        operator = button.innerText;
    });
});

怎么用html编计算器的程序

相关推荐

html中按钮怎么添加表单

提升网站访问性能的方法

怎么自学html语言

html怎么刷新页面的值

js 查看对象的方法

选择Node.js作为服务器端运行环境的优势有哪些

发表回复