《在线bootstrap(在线计算器)》

解决方案

为了创建一个方便易用的在线计算器，我们将使用Bootstrap框架来构建用户界面。Bootstrap是一个流行的前端框架，它提供了响应式设计和丰富的UI组件，可以快速搭建美观且功能强大的Web页面。通过结合HTML、CSS（主要由Bootstrap提供样式）和JavaScript（用于实现计算逻辑），我们可以构建出一个直观的在线计算器。

思路一：基础计算器功能实现

HTML结构

html
</p>



    
    <title>在线计算器</title>
    
    
        /* 自定义一些样式 */
        .calculator {
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        .display {
            background-color: #f0f0f0;
            height: 50px;
            line-height: 50px;
            text-align: right;
            font-size: 24px;
            padding-right: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .btn {
            margin: 5px;
        }
    


    <div class="container">
        <div class="calculator">
            <div class="display" id="display">0</div>
            <div class="row">
                <button type="button" class="col btn btn-secondary">7</button>
                <button type="button" class="col btn btn-secondary">8</button>
                <button type="button" class="col btn btn-secondary">9</button>
                <button type="button" class="col btn btn-danger">/</button>
            </div>
            <div class="row">
                <button type="button" class="col btn btn-secondary">4</button>
                <button type="button" class="col btn btn-secondary">5</button>
                <button type="button" class="col btn btn-secondary">6</button>
                <button type="button" class="col btn btn-danger">*</button>
            </div>
            <div class="row">
                <button type="button" class="col btn btn-secondary">1</button>
                <button type="button" class="col btn btn-secondary">2</button>
                <button type="button" class="col btn btn-secondary">3</button>
                <button type="button" class="col btn btn-danger">-</button>
            </div>
            <div class="row">
                <button type="button" class="col btn btn-secondary">0</button>
                <button type="button" class="col btn btn-secondary">.</button>
                <button type="button" class="col btn btn-success">=</button>
                <button type="button" class="col btn btn-danger">+</button>
            </div>
        </div>
    </div>

    
        let display = document.getElementById('display');
        let currentInput = '';
        function calculate() {
            try {
                currentInput = eval(currentInput);
                display.innerText = currentInput;
            } catch (e) {
                display.innerText = 'Error';
            }
        }
        // 监听按钮点击事件
        document.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('click', function () {
                if (this.innerText === '=') {
                    calculate();
                } else {
                    currentInput += this.innerText;
                    display.innerText = currentInput;
                }
            });
        });
    



<p>

在这个基础版本中，我们使用了Bootstrap的栅格系统来布局数字键和运算符键，同时利用简单的JavaScript实现了基本的四则运算功能。

思路二：添加更多功能

除了基本的四则运算，我们还可以为这个在线计算器添加更多功能，例如：

• 清除功能：可以增加一个“C”按钮，用于清空当前输入。
• 历史记录显示：可以添加一个区域用于显示之前的计算结果，方便用户查看历史记录。

对于清除功能，可以在HTML中添加如下代码：
```html


然后在JavaScript中定义`clearDisplay`函数：
javascript
function clearDisplay() {
currentInput = '';
display.innerText = '0';
}
```

对于历史记录显示，可以在页面中添加一个列表元素用于存储历史记录，并且在每次计算完成后将表达式和结果添加到列表中。

通过这些改进，可以让我们的在线计算器更加实用和完善。

（本文来源：nzw6.com）