JavaScript如何编写一个网页计算器？-网页设计-锦华智联科技

基本的四则运算（加、减、乘、除）
小数点运算
正负号切换
清空输入
删除最后一位数字
平方根运算
百分比运算
美观的响应式设计

最终效果预览

完整代码

您可以将以下所有代码复制到一个 .html 文件中,然后用浏览器打开即可看到效果。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JavaScript 网页计算器</title>
    <style>
        /* --- 全局样式 --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        }
        /* --- 计算器容器 --- */
        .calculator {
            background-color: #222;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            width: 350px;
        }
        /* --- 显示屏 --- */
        .display {
            background-color: #000;
            color: #fff;
            font-size: 2.5rem;
            text-align: right;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow-wrap: break-word;
            word-wrap: break-word;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        /* --- 按钮网格 --- */
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        /* --- 按钮通用样式 --- */
        button {
            font-size: 1.5rem;
            padding: 20px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            color: #fff;
            font-weight: bold;
        }
        /* --- 按钮悬停效果 --- */
        button:hover {
            transform: translateY(2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        button:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        /* --- 数字按钮样式 --- */
        .number {
            background-color: #444;
        }
        /* --- 运算符按钮样式 --- */
        .operator {
            background-color: #ff9500;
        }
        /* --- 功能按钮样式 --- */
        .function {
            background-color: #a5a5a5;
        }
        /* --- 等号按钮样式 --- */
        .equals {
            background-color: #2ecc71;
            grid-column: span 2; /* 等号按钮横跨两列 */
        }
        /* --- 特殊按钮样式 --- */
        .zero {
            grid-column: span 2; /* 0按钮横跨两列 */
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <!-- 第一行：功能按钮 -->
            <button class="function" onclick="clearDisplay()">C</button>
            <button class="function" onclick="deleteLast()">⌫</button>
            <button class="function" onclick="calculateSquareRoot()">√</button>
            <button class="operator" onclick="appendToDisplay('/')">/</button>
            <!-- 第二行：数字和运算符 -->
            <button class="number" onclick="appendToDisplay('7')">7</button>
            <button class="number" onclick="appendToDisplay('8')">8</button>
            <button class="number" onclick="appendToDisplay('9')">9</button>
            <button class="operator" onclick="appendToDisplay('*')">×</button>
            <!-- 第三行：数字和运算符 -->
            <button class="number" onclick="appendToDisplay('4')">4</button>
            <button class="number" onclick="appendToDisplay('5')">5</button>
            <button class="number" onclick="appendToDisplay('6')">6</button>
            <button class="operator" onclick="appendToDisplay('-')">-</button>
            <!-- 第四行：数字和运算符 -->
            <button class="number" onclick="appendToDisplay('1')">1</button>
            <button class="number" onclick="appendToDisplay('2')">2</button>
            <button class="number" onclick="appendToDisplay('3')">3</button>
            <button class="operator" onclick="appendToDisplay('+')">+</button>
            <!-- 第五行：特殊数字、等号和正负号 -->
            <button class="function" onclick="toggleSign()">+/-</button>
            <button class="number zero" onclick="appendToDisplay('0')">0</button>
            <button class="number" onclick="appendToDisplay('.')">.</button>
            <button class="equals" onclick="calculate()">=</button>
        </div>
    </div>
    <script>
        // 获取显示元素
        const display = document.getElementById('display');
        let currentInput = '0'; // 当前显示的输入
        let shouldResetDisplay = false; // 标志位，用于判断是否需要重置显示（例如输入新数字时）
        // 更新显示屏内容
        function updateDisplay() {
            display.textContent = currentInput;
        }
        // 向当前输入追加内容
        function appendToDisplay(value) {
            // 如果需要重置显示（例如刚按完等号），则重置当前输入为空
            if (shouldResetDisplay) {
                currentInput = '';
                shouldResetDisplay = false;
            }
            // 处理小数点
            if (value === '.') {
                // 如果当前输入为空或以0开头，则添加 '0.'
                if (currentInput === '' || currentInput === '0') {
                    currentInput = '0.';
                } else if (!currentInput.includes('.')) { // 如果当前输入还没有小数点
                    currentInput += '.';
                }
                updateDisplay();
                return;
            }
            // 处理数字
            if (!isNaN(value)) {
                // 如果当前输入是 '0'，则直接替换为新数字
                if (currentInput === '0') {
                    currentInput = value;
                } else {
                    currentInput += value;
                }
                updateDisplay();
            }
        }
        // 清空显示屏
        function clearDisplay() {
            currentInput = '0';
            shouldResetDisplay = false;
            updateDisplay();
        }
        // 删除最后一位
        function deleteLast() {
            if (currentInput.length > 1) {
                currentInput = currentInput.slice(0, -1);
            } else {
                currentInput = '0';
            }
            updateDisplay();
        }
        // 计算结果
        function calculate() {
            try {
                // 使用 Function 构造函数安全地计算表达式
                // 它比 eval() 更安全，因为它有自己的作用域
                const result = Function('"use strict"; return (' + currentInput + ')')();
                // 处理结果为小数的情况，保留一定精度
                if (typeof result === 'number' && !isNaN(result)) {
                    // 如果结果是整数，直接显示；否则保留最多8位小数
                    currentInput = Number.isInteger(result) ? result.toString() : result.toFixed(8).replace(/\.?0+$/, "");
                } else {
                    throw new Error('Invalid calculation');
                }
            } catch (error) {
                currentInput = 'Error';
            }
            shouldResetDisplay = true; // 下次输入时重置显示
            updateDisplay();
        }
        // 计算平方根
        function calculateSquareRoot() {
            const number = parseFloat(currentInput);
            if (number >= 0) {
                currentInput = Math.sqrt(number).toString();
                shouldResetDisplay = true;
            } else {
                currentInput = 'Error';
            }
            updateDisplay();
        }
        // 切换正负号
        function toggleSign() {
            const number = parseFloat(currentInput);
            if (!isNaN(number)) {
                currentInput = (-number).toString();
                updateDisplay();
            }
        }
    </script>
</body>
</html>

代码分步解析

HTML 结构 (`<body>` 部分)

HTML 部分非常简单,它构建了计算器的骨架：

<div class="calculator">: 这是整个计算器的容器。
<div class="display" id="display">0</div>: 这是显示屏，id="display" 用于让 JavaScript 能够找到并修改它。
<div class="buttons">: 这是一个按钮容器。
<button>: 每个按钮代表一个功能。
- onclick="...": 这是关键属性，当按钮被点击时，会执行引号内的 JavaScript 函数。
- class="...": 用于 CSS 样式区分（数字、运算符、功能按钮等）。
- grid-column: span 2;: 这是一个 CSS Grid 属性，用于让“0”和“=”按钮占据两列的宽度,使布局更美观。

CSS 样式 (`<style>` 部分)

CSS 负责计算器的“外貌”,使其看起来像一个现代化的计算器。

body: 使用 flexbox 将计算器居中,并设置了一个渐变背景。
.calculator: 设置了深色背景、圆角、阴影,使其有立体感。
.display: 黑色背景，白色文字，大字体，右对齐，并设置了最小高度,防止内容为空时布局塌陷。
.buttons: 使用 display: grid 创建一个 4 列的网格布局，按钮之间的间距由 gap 控制。
button: 定义了所有按钮的通用样式，如圆角、鼠标悬停效果 (hover) 和点击效果 (active)。
.number, .operator, .function, .equals: 为不同类型的按钮设置了不同的背景色,方便用户区分。

JavaScript 逻辑 (`<script>` 部分)

这是计算器的“大脑”,负责处理所有计算和交互逻辑。

变量:
（图片来源网络，侵删）
- display: 获取 HTML 中的显示屏元素。
- currentInput: 一个字符串，用于存储当前在屏幕上显示的内容。注意：我们始终将输入作为字符串处理，这样可以轻松地追加数字和处理小数点,直到需要计算时才将其转换为数字。
- shouldResetDisplay: 一个布尔标志，当用户按下计算出结果后，如果用户再按数字键，显示屏应该被清空并开始输入新的数字,这个标志就是用来控制这个逻辑的。
核心函数:
- updateDisplay(): 一个简单的辅助函数，将 currentInput 字符串的内容更新到 display 元素上。
- appendToDisplay(value): 当数字、小数点或运算符被点击时调用。
  - 首先检查 shouldResetDisplay，如果为 true，则清空 currentInput 并重置标志。
  - 处理小数点逻辑：确保不会出现多个小数点。
  - 处理数字逻辑：如果当前是 "0"，则直接替换,否则追加。
- calculate(): 当被点击时调用。
  - try...catch: 这是一个非常重要的安全措施，如果用户输入了不合法的表达式（如 5++），Function 会抛出错误，catch 块会捕获并显示 "Error",防止程序崩溃。
  - Function('"use strict"; return (' + currentInput + ')')(): 这是计算表达式的核心，它比 eval() 更安全，因为它在独立的作用域中执行代码。use strict 启用严格模式,可以避免一些潜在的安全问题。
  - 结果处理：计算结果后，将其转换回字符串，并设置 shouldResetDisplay = true,为下一次输入做准备。
- clearDisplay(): 将 currentInput 重置为 "0"。
- deleteLast(): 删除 currentInput 的最后一个字符。
- calculateSquareRoot(): 对当前数字开平方根,并处理负数情况。
- toggleSign(): 将当前数字的正负号取反。

如何运行和扩展

运行: 将所有代码复制到一个文本编辑器中，保存为 calculator.html 文件，然后用 Chrome、Firefox 或 Edge 等浏览器打开它。
扩展:
- 添加更多功能: 你可以轻松添加更多按钮，x² (平方), 1/x (倒数), sin, cos 等，并为它们编写对应的 JavaScript 函数。
- 改进样式: 修改 CSS 中的颜色、字体、大小等,来打造你自己的独特风格。
- 键盘支持: 可以添加事件监听器,允许用户使用键盘上的数字和运算符键来操作计算器。

（图片来源网络，侵删）

JavaScript如何编写一个网页计算器？

最终效果预览

完整代码

代码分步解析

HTML 结构 (<body> 部分)

CSS 样式 (<style> 部分)

JavaScript 逻辑 (<script> 部分)

如何运行和扩展

HTML 结构 (`<body>` 部分)

CSS 样式 (`<style>` 部分)

JavaScript 逻辑 (`<script>` 部分)