正文

轻松打造：HTML5基础教程，教你如何一步步编写一个实用计算器

/0 浏览量
0829

引言

在这个数字化时代，掌握基础的网页制作技能对于很多人来说都至关重要。HTML5作为当前网页开发的主流语言，其简洁的语法和强大的功能，使得我们可以轻松地创建各种类型的网页应用。今天，我们就来一起动手打造一个实用的计算器，通过这个简单的项目，你可以学习到HTML5的基本结构、CSS样式设计以及JavaScript的简单应用。

第一步：搭建HTML5基本结构

首先，我们需要创建一个基本的HTML5文档结构。在文本编辑器中输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实用计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <button onclick="clearDisplay()">C</button>
        <button onclick="appendNumber('1')">1</button>
        <!-- ... 其他数字按钮 ... -->
        <button onclick="calculate()">=</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

这段代码定义了一个简单的计算器界面，包括一个显示屏和一个清除按钮。接下来，我们将为每个按钮添加对应的功能。

第二步：添加CSS样式

为了让计算器看起来更加美观，我们需要添加一些CSS样式。在名为style.css的文件中，输入以下代码：

#calculator {
    width: 300px;
    margin: auto;
    border: 1px solid #ccc;
    padding: 10px;
}

#display {
    width: 100%;
    margin-bottom: 10px;
}

button {
    width: 24%;
    padding: 10px;
    margin: 5px;
    font-size: 16px;
}

这段代码为计算器添加了基本的样式，包括宽度、边框、内边距和字体大小等。

第三步：编写JavaScript代码

现在，我们需要为计算器添加功能。在名为script.js的文件中，输入以下代码：

let display = document.getElementById('display');
let numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let operators = ['+', '-', '*', '/'];

function appendNumber(number) {
    display.value += number;
}

function clearDisplay() {
    display.value = '';
}

function calculate() {
    let expression = display.value;
    try {
        let result = eval(expression);
        display.value = result;
    } catch (error) {
        display.value = 'Error';
    }
}

这段代码为计算器添加了数字按钮和运算符按钮的功能。appendNumber函数用于向显示屏添加数字，clearDisplay函数用于清除显示屏，calculate函数用于计算表达式的结果。

总结

通过以上步骤，我们已经成功创建了一个实用的计算器。在这个过程中，我们学习了HTML5的基本结构、CSS样式设计以及JavaScript的简单应用。这个项目只是一个起点，你可以根据自己的需求对计算器进行扩展，比如添加更多功能、美化界面等。希望这篇教程对你有所帮助，祝你学习愉快！

-- 展开阅读全文 --