html如何用js弄计算器

在HTML中创建一个计算器，我们可以使用JavaScript来处理用户的输入和计算逻辑，下面我将详细介绍如何用JavaScript编写一个简单的计算器，我们需要准备好HTML结构和CSS样式，然后编写JavaScript代码实现计算器的功能。

HTML结构

我们来创建一个基本的HTML结构，包含输入框、按钮和一些基本的布局。

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <div id="buttons">
            <!-- 这里我们将添加按钮 -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

简单的CSS样式来美化我们的计算器：

CSS

/* styles.css */
#calculator {
    width: 300px;
    margin: 0 auto;
}
#display {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 24px;
}
#buttons {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-gap: 10px;
}
#buttons button {
    width: 100%;
    height: 40px;
    font-size: 18px;
}

以下是如何用JS来实现计算器的详细步骤：

JavaScript代码

1、初始化按钮和事件监听器

JavaScript

// script.js
document.addEventListener('DOMContentLoaded', function () {
    var display = document.getElementById('display');
    var buttons = document.getElementById('buttons');
    // 创建按钮和对应的值
    var buttonValues = [
        '7', '8', '9', '/',
        '4', '5', '6', '*',
        '1', '2', '3', '-',
        '0', '.', '=', '+'
    ];
    // 动态添加按钮
    for (var i = 0; i < buttonValues.length; i++) {
        var btn = document.createElement('button');
        btn.textContent = buttonValues[i];
        btn.addEventListener('click', function () {
            onButtonClick(this.textContent);
        });
        buttons.appendChild(btn);
    }
});

2、处理按钮点击事件

JavaScript

var currentExpression = '';
function onButtonClick(value) {
    if (value === '=') {
        // 计算表达式的结果
        display.value = eval(currentExpression);
        currentExpression = '';
    } else {
        // 添加值到当前表达式
        currentExpression += value;
        display.value = currentExpression;
    }
}