如何用用html5做计算器

HTML5是一种用于构建和呈现网页内容的标记语言，它为开发人员提供了强大的功能和灵活性，在HTML5中，您可以创建各种交互式元素，包括一个简单的计算器，在本教程中，我们将学习如何使用HTML5、CSS和JavaScript创建一个基本的计算器。

1. HTML结构

我们需要创建HTML结构，这将包括一个div元素，它将包含计算器的所有按钮和输入字段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" readonly>
        <button onclick="clearDisplay()">C</button>
        <button onclick="deleteLast()">DEL</button>
        <!-- Add more buttons for numbers and operations -->
    </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;
    font-family: Arial, sans-serif;
}
#calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 50px);
    grid-gap: 5px;
}
#calculator input {
    grid-column: 1 / span 4;
    text-align: right;
    font-size: 24px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#calculator button {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 18px;
    padding: 5px;
    cursor: pointer;
}
#calculator button:hover {
    background-color: #e2e2e2;
}

3. JavaScript逻辑

我们需要添加JavaScript代码来处理按钮点击事件并执行计算，创建一个名为script.js的文件，并添加以下内容：

function addNumber(number) {
    const display = document.getElementById('display');
    display.value += number;
}
function calculate(operation) {
    try {
        const display = document.getElementById('display');
        const result = eval(display.value);
        display.value = result;
    } catch (error) {
        alert('Invalid calculation');
    }
}
function clearDisplay() {
    document.getElementById('display').value = '';
}
function deleteLast() {
    const display = document.getElementById('display');
    display.value = display.value.slice(0, -1);
}
// Add event listeners for buttons
document.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('#calculator button');
    buttons.forEach(button => {
        if (!button.onclick) {
            button.addEventListener('click', () => addNumber(button.innerText));
        }
    });
});

在这个示例中，我们定义了几个函数来处理不同的操作，如添加数字、计算结果、清除显示和删除最后一个字符，我们还为数字按钮添加了事件监听器，以便在点击时调用addNumber函数。

结论

现在，您已经学会了如何使用HTML5、CSS和JavaScript创建一个简单的计算器，这个计算器可以处理基本的数学运算，如加、减、乘和除，您可以根据自己的需求进一步扩展这个计算器的功能，例如添加记忆功能、百分比计算或更复杂的数学运算。