简单网页计算器js代码如何实现？-网页设计-锦华智联科技

基本的加减乘除
小数点运算
清除输入
删除上一个字符
显示计算结果

我们将代码分为三个部分：HTML (结构), CSS (样式), 和 JavaScript (逻辑)，您可以将它们复制到三个不同的文件中（index.html, style.css, script.js），或者将 CSS 和 JS 直接嵌入到 HTML 文件中。

三个独立文件 (推荐)

这种方式结构清晰,便于管理和维护。

HTML (`index.html`)

这是计算器的骨架,包含了所有按钮和显示区域。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单网页计算器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <div class="display">
            <input type="text" id="display" readonly>
        </div>
        <div class="buttons">
            <button class="btn btn-clear" data-action="clear">C</button>
            <button class="btn btn-delete" data-action="delete">⌫</button>
            <button class="btn btn-operator" data-value="/">/</button>
            <button class="btn btn-operator" data-value="*">×</button>
            <button class="btn btn-number" data-value="7">7</button>
            <button class="btn btn-number" data-value="8">8</button>
            <button class="btn btn-number" data-value="9">9</button>
            <button class="btn btn-operator" data-value="-">-</button>
            <button class="btn btn-number" data-value="4">4</button>
            <button class="btn btn-number" data-value="5">5</button>
            <button class="btn btn-number" data-value="6">6</button>
            <button class="btn btn-operator" data-value="+">+</button>
            <button class="btn btn-number" data-value="1">1</button>
            <button class="btn btn-number" data-value="2">2</button>
            <button class="btn btn-number" data-value="3">3</button>
            <button class="btn btn-equals" rowspan="2" data-action="equals">=</button>
            <button class="btn btn-number" data-value="0">0</button>
            <button class="btn btn-number" data-value=".">.</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (`style.css`)

这部分代码负责美化计算器,让它看起来像一个真正的计算器。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
}
.calculator {
    border: 2px solid #333;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: 320px;
    background-color: #222;
}
.display {
    background-color: #333;
    padding: 20px;
    text-align: right;
}
#display {
    width: 100%;
    font-size: 2.5em;
    color: #fff;
    border: none;
    background: transparent;
    text-align: right;
    outline: none;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
}
.btn {
    font-size: 1.5em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-number {
    background-color: #555;
    color: #fff;
}
.btn-number:hover {
    background-color: #666;
}
.btn-operator {
    background-color: #f59e0b;
    color: #fff;
}
.btn-operator:hover {
    background-color: #d97706;
}
.btn-equals {
    background-color: #10b981;
    color: #fff;
    grid-row: span 2; /* 让等号按钮占两行 */
}
.btn-equals:hover {
    background-color: #059669;
}
.btn-clear {
    background-color: #ef4444;
    color: #fff;
}
.btn-clear:hover {
    background-color: #dc2626;
}
.btn-delete {
    background-color: #6b7280;
    color: #fff;
}
.btn-delete:hover {
    background-color: #4b5563;
}

JavaScript (`script.js`)

这是计算器的大脑,处理所有的用户输入和计算逻辑。

// 获取DOM元素
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');
// 初始化变量
let currentInput = '0';
let previousInput = '';
let operation = null;
let shouldResetScreen = false;
// 更新显示
function updateDisplay() {
    display.value = currentInput;
}
// 处理数字和点号输入
function handleNumber(value) {
    if (shouldResetScreen) {
        currentInput = '';
        shouldResetScreen = false;
    }
    if (currentInput === '0' && value !== '.') {
        currentInput = value;
    } else {
        // 防止输入多个小数点
        if (value === '.' && currentInput.includes('.')) {
            return;
        }
        currentInput += value;
    }
    updateDisplay();
}
// 处理运算符输入
function handleOperator(value) {
    if (operation !== null && !shouldResetScreen) {
        calculate();
    }
    previousInput = currentInput;
    operation = value;
    shouldResetScreen = true;
}
// 执行计算
function calculate() {
    if (operation === null || shouldResetScreen) {
        return;
    }
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    switch (operation) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            if (current === 0) {
                alert('不能除以零!');
                clear();
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    // 处理结果为整数或小数
    currentInput = Number.isInteger(result) ? result.toString() : result.toFixed(8).replace(/\.?0+$/, "");
    operation = null;
    shouldResetScreen = true;
    updateDisplay();
}
// 清除所有
function clear() {
    currentInput = '0';
    previousInput = '';
    operation = null;
    shouldResetScreen = false;
    updateDisplay();
}
// 删除最后一个字符
function deleteLastChar() {
    if (currentInput.length === 1) {
        currentInput = '0';
    } else {
        currentInput = currentInput.slice(0, -1);
    }
    updateDisplay();
}
// 为所有按钮添加事件监听器
buttons.forEach(button => {
    const action = button.dataset.action;
    const value = button.dataset.value;
    button.addEventListener('click', () => {
        if (action === 'clear') {
            clear();
        } else if (action === 'delete') {
            deleteLastChar();
        } else if (action === 'equals') {
            calculate();
        } else if (value) {
            if (['+', '-', '*', '/'].includes(value)) {
                handleOperator(value);
            } else {
                handleNumber(value);
            }
        }
    });
});
// 初始化显示
updateDisplay();

单文件 HTML (方便测试)

如果您想快速运行，可以将所有代码合并到一个 index.html 文件中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单网页计算器</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            font-family: Arial, sans-serif;
        }
        .calculator {
            border: 2px solid #333;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            width: 320px;
            background-color: #222;
        }
        .display {
            background-color: #333;
            padding: 20px;
            text-align: right;
        }
        #display {
            width: 100%;
            font-size: 2.5em;
            color: #fff;
            border: none;
            background: transparent;
            text-align: right;
            outline: none;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 20px;
        }
        .btn {
            font-size: 1.5em;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .btn-number {
            background-color: #555;
            color: #fff;
        }
        .btn-number:hover {
            background-color: #666;
        }
        .btn-operator {
            background-color: #f59e0b;
            color: #fff;
        }
        .btn-operator:hover {
            background-color: #d97706;
        }
        .btn-equals {
            background-color: #10b981;
            color: #fff;
            grid-row: span 2;
        }
        .btn-equals:hover {
            background-color: #059669;
        }
        .btn-clear {
            background-color: #ef4444;
            color: #fff;
        }
        .btn-clear:hover {
            background-color: #dc2626;
        }
        .btn-delete {
            background-color: #6b7280;
            color: #fff;
        }
        .btn-delete:hover {
            background-color: #4b5563;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display">
            <input type="text" id="display" readonly>
        </div>
        <div class="buttons">
            <button class="btn btn-clear" data-action="clear">C</button>
            <button class="btn btn-delete" data-action="delete">⌫</button>
            <button class="btn btn-operator" data-value="/">/</button>
            <button class="btn btn-operator" data-value="*">×</button>
            <button class="btn btn-number" data-value="7">7</button>
            <button class="btn btn-number" data-value="8">8</button>
            <button class="btn btn-number" data-value="9">9</button>
            <button class="btn btn-operator" data-value="-">-</button>
            <button class="btn btn-number" data-value="4">4</button>
            <button class="btn btn-number" data-value="5">5</button>
            <button class="btn btn-number" data-value="6">6</button>
            <button class="btn btn-operator" data-value="+">+</button>
            <button class="btn btn-number" data-value="1">1</button>
            <button class="btn btn-number" data-value="2">2</button>
            <button class="btn btn-number" data-value="3">3</button>
            <button class="btn btn-equals" rowspan="2" data-action="equals">=</button>
            <button class="btn btn-number" data-value="0">0</button>
            <button class="btn btn-number" data-value=".">.</button>
        </div>
    </div>
    <script>
        const display = document.getElementById('display');
        const buttons = document.querySelectorAll('.btn');
        let currentInput = '0';
        let previousInput = '';
        let operation = null;
        let shouldResetScreen = false;
        function updateDisplay() {
            display.value = currentInput;
        }
        function handleNumber(value) {
            if (shouldResetScreen) {
                currentInput = '';
                shouldResetScreen = false;
            }
            if (currentInput === '0' && value !== '.') {
                currentInput = value;
            } else {
                if (value === '.' && currentInput.includes('.')) {
                    return;
                }
                currentInput += value;
            }
            updateDisplay();
        }
        function handleOperator(value) {
            if (operation !== null && !shouldResetScreen) {
                calculate();
            }
            previousInput = currentInput;
            operation = value;
            shouldResetScreen = true;
        }
        function calculate() {
            if (operation === null || shouldResetScreen) {
                return;
            }
            let result;
            const prev = parseFloat(previousInput);
            const current = parseFloat(currentInput);
            switch (operation) {
                case '+':
                    result = prev + current;
                    break;
                case '-':
                    result = prev - current;
                    break;
                case '*':
                    result = prev * current;
                    break;
                case '/':
                    if (current === 0) {
                        alert('不能除以零!');
                        clear();
                        return;
                    }
                    result = prev / current;
                    break;
                default:
                    return;
            }
            currentInput = Number.isInteger(result) ? result.toString() : result.toFixed(8).replace(/\.?0+$/, "");
            operation = null;
            shouldResetScreen = true;
            updateDisplay();
        }
        function clear() {
            currentInput = '0';
            previousInput = '';
            operation = null;
            shouldResetScreen = false;
            updateDisplay();
        }
        function deleteLastChar() {
            if (currentInput.length === 1) {
                currentInput = '0';
            } else {
                currentInput = currentInput.slice(0, -1);
            }
            updateDisplay();
        }
        buttons.forEach(button => {
            const action = button.dataset.action;
            const value = button.dataset.value;
            button.addEventListener('click', () => {
                if (action === 'clear') {
                    clear();
                } else if (action === 'delete') {
                    deleteLastChar();
                } else if (action === 'equals') {
                    calculate();
                } else if (value) {
                    if (['+', '-', '*', '/'].includes(value)) {
                        handleOperator(value);
                    } else {
                        handleNumber(value);
                    }
                }
            });
        });
        updateDisplay();
    </script>
</body>
</html>

如何运行

选择方案：选择您喜欢的方案（三个文件或单文件）。
创建文件：如果选择三个文件，创建 index.html, style.css, 和 script.js 三个文件，并将对应的代码复制进去，如果选择单文件，只需创建一个 index.html 文件。
保存：确保所有文件都保存在同一个文件夹下。
打开：用任何现代浏览器（如 Chrome, Firefox, Edge）打开 index.html 文件。

您就可以看到一个功能齐全、外观美观的网页计算器了！

简单网页计算器js代码如何实现？

三个独立文件 (推荐)

HTML (index.html)

CSS (style.css)

JavaScript (script.js)

单文件 HTML (方便测试)

如何运行

HTML (`index.html`)

CSS (`style.css`)

JavaScript (`script.js`)