Bootstrap

风尚云网前端学习：制作一款简易的在线计算器

风尚云网前端学习：制作一款简易的在线计算器

简介

在前端开发的学习过程中，实现一个简单的在线计算器是一个常见的练习项目。它不仅能够帮助我们熟悉HTML、CSS和JavaScript的基本用法，还能够加深我们对事件处理和DOM操作的理解。今天，我们将一起学习如何创建一款简易的在线计算器，并探索其背后的代码实现。在这里插入图片描述

项目结构

我们的计算器项目包含三个主要部分：HTML结构、CSS样式和JavaScript逻辑。

HTML结构

HTML部分负责构建计算器的界面。我们使用<div>元素来创建计算器的容器，<input>元素作为显示屏，以及一系列<button>元素作为数字和运算符的按钮。

<div class="calculator">
    <p>风尚云网前端学习：<br>一款简易的在线计算器</p>
    <input type="text" id="display" class="display" readonly>
    <div class="button-grid">
        <!-- 按钮 -->
    </div>
</div>

CSS样式

CSS部分负责计算器的样式设计。我们使用了Flexbox布局来居中显示计算器，并为按钮和显示屏添加了一些基本的样式，使其看起来更加美观。

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

.calculator {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 240px;
    max-width: 100%;
    padding: 20px;
}

.display {
    background-color: #f7f7f7;
    color: #333;
    font-size: 1.2em;
    padding: 15px;
    text-align: right;
    border: none;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.button {
    background-color: #e0e0e0;
    border: none;
    border-radius: 5px;
    color: #333;
    cursor: pointer;
    font-size: 1em;
    padding: 15px;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* 更多样式... */

JavaScript逻辑

JavaScript部分负责计算器的逻辑处理。我们为每个按钮添加了事件监听器，以便在点击时执行相应的操作。这包括数字输入、运算符选择、计算结果和清除操作。

const display = document.getElementById('display');
let currentInput = '';
let previousInput = '';
let operation = null;

const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;
        if (value === 'C') {
            currentInput = '';
            previousInput = '';
            operation = null;
            display.value = '';
        } else if (value === '=') {
            if (previousInput !== '' && operation !== null && currentInput !== '') {
                calculateResult();
            }
        } else if (['+', '-', '×', '÷'].includes(value)) {
            if (currentInput !== '') {
                if (operation) {
                    calculateResult();
                }
                previousInput = parseFloat(currentInput);
                currentInput = '';
                operation = value;
            }
        } else if (value === '.') {
            if (!currentInput.includes('.')) {
                currentInput += value;
            }
        } else {
            currentInput += value;
        }
        display.value = currentInput || previousInput || '';
    });
});

function calculateResult() {
    let result;
    const num1 = parseFloat(previousInput);
    const num2 = parseFloat(currentInput);

    switch (operation) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '×':
            result = num1 * num2;
            break;
        case '÷':
            if (num2 === 0) {
                alert('除数不能为0');
                return;
            }
            result = num1 / num2;
            break;
    }

    display.value = result;
    currentInput = result.toString();
    previousInput = '';
    operation = null;
}

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在移动设备上正常显示 -->
    <title>基本计算器</title> <!-- 页面标题 -->
    <style>
        /* CSS样式开始 */
        body {
            font-family: 'Arial', sans-serif; /* 设置字体 */
            background-color: #ececec; /* 设置背景颜色 */
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 高度设置为视口高度 */
            margin: 0; /* 移除默认边距 */
        }
        .calculator {
            background-color: #ffffff; /* 计算器背景颜色 */
            border-radius: 10px; /* 边框圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            overflow: hidden; /* 隐藏溢出内容 */
            width: 240px; /* 计算器宽度 */
            max-width: 100%; /* 最大宽度为100% */
            padding: 20px; /* 内边距 */
        }
        .display {
            background-color: #f7f7f7; /* 显示屏背景颜色 */
            color: #333; /* 文字颜色 */
            font-size: 1.2em; /* 字体大小 */
            padding: 15px; /* 内边距 */
            text-align: right; /* 文本右对齐 */
            border: none; /* 无边框 */
            outline: none; /* 无轮廓 */
            width: 100%; /* 宽度100% */
            box-sizing: border-box; /* 盒模型 */
            margin-bottom: 15px; /* 外边距 */
        }
        .button-grid {
            display: grid; /* 使用网格布局 */
            grid-template-columns: repeat(4, 1fr); /* 四列 */
            gap: 10px; /* 间隔 */
        }
        .button {
            background-color: #e0e0e0; /* 按钮背景颜色 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 边框圆角 */
            color: #333; /* 文字颜色 */
            cursor: pointer; /* 鼠标指针 */
            font-size: 1em; /* 字体大小 */
            padding: 15px; /* 内边距 */
            text-align: center; /* 文本居中 */
            transition: background-color 0.3s ease; /* 背景色渐变 */
        }
        .button:hover {
            background-color: #d5d5d5; /* 鼠标悬停背景颜色 */
        }
        .button:active {
            background-color: #cccccc; /* 鼠标按下背景颜色 */
        }
        .operator {
            background-color: #000; /* 操作符按钮背景颜色 */
            color: #fff; /* 文字颜色 */
        }
        .operator:hover {
            background-color: #f57c00; /* 鼠标悬停背景颜色 */
        }
        .operator:active {
            background-color: #ef6c00; /* 鼠标按下背景颜色 */
        }
        .equals {
            background-color: #000; /* 等号按钮背景颜色 */
            color: #fff; /* 文字颜色 */
        }
        .equals:hover {
            background-color: #45a049; /* 鼠标悬停背景颜色 */
        }
        .equals:active {
            background-color: #3e8e41; /* 鼠标按下背景颜色 */
        }
        /* CSS样式结束 */
    </style>
</head>
<body>
<div class="calculator">
    <!-- 标题和副标题 -->
    <p>风尚云网前端学习：<br>一款简易的在线计算器</p>
    <!-- 显示屏 -->
    <input type="text" id="display" class="display" readonly>
    <!-- 按钮网格 -->
    <div class="button-grid">
        <!-- 清除按钮 -->
        <button class="button clear">C</button>
        <!-- 数字按钮 -->
        <button class="button number">1</button>
        <button class="button number">2</button>
        <button class="button number">3</button>
        <button class="button number">4</button>
        <button class="button number">5</button>
        <button class="button number">6</button>
        <button class="button number">7</button>
        <button class="button number">8</button>
        <button class="button number">9</button>
        <button class="button number">0</button>
        <!-- 小数点按钮 -->
        <button class="button decimal">.</button>
        <!-- 操作符按钮 -->
        <button class="button operator">+</button>
        <button class="button operator">-</button>
        <button class="button operator">×</button>
        <button class="button operator">÷</button>
        <!-- 等号按钮 -->
        <button class="button equals">=</button>
    </div>
</div>

<script>
    // 获取显示屏元素
    const display = document.getElementById('display');
    // 用于存储当前输入的数字
    let currentInput = '';
    // 用于存储之前的数字
    let previousInput = '';
    // 用于存储操作符
    let operation = null;

    // 获取所有按钮
    const buttons = document.querySelectorAll('.button');
    // 为每个按钮添加点击事件
    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const value = button.textContent;
            // 处理清除按钮
            if (value === 'C') {
                currentInput = '';
                previousInput = '';
                operation = null;
                display.value = '';
            } else if (value === '=') {
                // 处理等号按钮，计算结果
                if (previousInput !== '' && operation !== null && currentInput !== '') {
                    calculateResult();
                }
            } else if (['+', '-', '×', '÷'].includes(value)) {
                // 处理操作符按钮
                if (currentInput !== '') {
                    if (operation) {
                        calculateResult();
                    }
                    previousInput = parseFloat(currentInput);
                    currentInput = '';
                    operation = value;
                }
            } else if (value === '.') {
                // 处理小数点按钮
                if (!currentInput.includes('.')) {
                    currentInput += value;
                }
            } else {
                // 处理数字按钮
                currentInput += value;
            }
            // 更新显示屏
            display.value = currentInput || previousInput || '';
        });
    });

    // 计算结果的函数
    function calculateResult() {
        let result;
        const num1 = parseFloat(previousInput);
        const num2 = parseFloat(currentInput);

        // 根据操作符计算结果
        switch (operation) {
            case '+':
                result = num1 + num2;
                break;
            case '-':
                result = num1 - num2;
                break;
            case '×':
                result = num1 * num2;
                break;
            case '÷':
                if (num2 === 0) {
                    alert('除数不能为0');
                    return;
                }
                result = num1 / num2;
                break;
        }

        // 显示结果
        display.value = result;
        // 重置输入
        currentInput = result.toString();
        previousInput = '';
        operation = null;
    }
</script>

</body>
</html>

结论

通过本教程，我们学习了如何创建一个简易的在线计算器。这个项目不仅锻炼了我们的前端技能，还帮助我们理解了事件驱动编程的基本概念。希望这个教程能够帮助你更好地理解HTML、CSS和JavaScript的实际应用，并激发你创建自己的网页项目。

注意：在实际部署时，请确保所有的资源文件（如CSS和JavaScript）都已正确链接，以便计算器能够正常工作。如果你在实现过程中遇到任何问题，欢迎在评论区提问或寻求帮助。

我是风尚，梦想是带十万人创建一个风尚云网全能圈子！

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Windows + VS2022超详细点云库（PCL）配置
VSCode\\VS2017下CPP环境的配置
Paddlepaddle使用自己的VOC数据集训练目标检测（0废话简易教程）
set（集合），multiset容器及pair队组的创建
IDEA创建maven工程（一站式）
WEB-通用漏洞&SQL注入&CTF&二次&堆叠&DNS带外
使用win32imageinstall安装ubuntu
讲讲分布式与集群的区别？
计算机视觉 9-16章 (硕士)
Vue学习笔记(二)-Vue指令的学习
;