正文

轻松学会，HTML5打造实用计算器：附带源代码教程

/0 浏览量
1021

在这个数字化时代，掌握一些基础的网页开发技能是非常有用的。HTML5作为一种强大的标记语言，可以帮助我们创建丰富的网页内容。今天，我们就来一起学习如何使用HTML5打造一个实用的计算器，并且我会提供完整的源代码供你参考。

了解HTML5计算器的基本结构

首先，我们需要明确一个计算器的基本功能。一个基本的计算器通常包括以下几个部分：

  1. 显示区域：用于显示输入的数字和计算结果。
  2. 按键区域：包括数字键、运算符键和功能键（如清除、等号等）。

接下来，我们将按照这些部分来构建我们的HTML5计算器。

创建HTML结构

首先，我们需要创建一个HTML文件，并设置基本的HTML结构。以下是一个简单的HTML5文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <div id="display">0</div>
        <div id="buttons">
            <!-- 按键区域将在这里添加 -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们定义了一个#calculator容器，其中包含一个用于显示的#display区域和一个用于放置按钮的#buttons区域。

添加CSS样式

为了使计算器看起来更加美观，我们需要添加一些CSS样式。以下是一个简单的CSS样式文件styles.css：

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#buttons button {
    width: 20%;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f2f2f2;
    cursor: pointer;
}

#buttons button:hover {
    background-color: #ddd;
}

通过上面的CSS样式，我们的计算器已经有了基本的样式。

添加JavaScript逻辑

最后，我们需要添加JavaScript逻辑来处理用户与计算器的交互。以下是一个简单的JavaScript文件script.js：

document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('#buttons button');

    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const value = this.innerText;
            if (value === 'C') {
                display.innerText = '0';
            } else if (value === '=') {
                try {
                    display.innerText = eval(display.innerText);
                } catch (e) {
                    display.innerText = 'Error';
                }
            } else {
                display.innerText += value;
            }
        });
    });
});

在这个JavaScript文件中，我们为每个按钮添加了一个点击事件监听器。当用户点击按钮时，我们会根据按钮的值来更新显示区域的内容。

完整的源代码

以下是完整的源代码，你可以将其保存为HTML文件并在浏览器中打开：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <div id="display">0</div>
        <div id="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>C</button>
            <button>=</button>
            <button>+</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#buttons button {
    width: 20%;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f2f2f2;
    cursor: pointer;
}

#buttons button:hover {
    background-color: #ddd;
}

document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('#buttons button');

    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const value = this.innerText;
            if (value === 'C') {
                display.innerText = '0';
            } else if (value === '=') {
                try {
                    display.innerText = eval(display.innerText);
                } catch (e) {
                    display.innerText = 'Error';
                }
            } else {
                display.innerText += value;
            }
        });
    });
});

通过以上步骤，你已经成功创建了一个基本的HTML5计算器。你可以根据自己的需求对代码进行修改和扩展，例如添加更多的功能或改进界面设计。希望这个教程能帮助你入门HTML5开发！

-- 展开阅读全文 --