基于原生html、css、js实现计算器功能

爱吃卤煮的王子殿下

已于 2024-05-12 11:30:11 修改

阅读量491

点赞数 3

分类专栏：前端文章标签： javascript vscode html css3 前端 bootstrap 前端框架

于 2024-05-12 11:07:25 首次发布

本文链接：https://blog.csdn.net/2301_76761541/article/details/138749218

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基于原生html、css、js实现计算器功能

此计算器实现了数字输入、基本运算符处理、结果显示、清除操作、以及二进制与十进制的相互转换、撤回功能在这里插入代码片

效果图：

样式：用到了bootstrap`在这里插入代码片`

在这里插入图片描述

html部分

<!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="./bootstrap.min.css">
    <script src="./bootstrap.min.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <table class="table table-borderless">
                <tbody>
                    <tr>
                        <td colspan="4" class="text-right result" id="display"></td>
                    </tr>
                    <tr> 
                        <td><button  class="btn btn-primary button myButtonSwitch">二</button></td>
                        <td><button  class="btn btn-primary button myButtonSwitch1">十</button></td>
                        <td><button  class="btn btn-primary button myButtonBracket">X</button></td>
                        <td><button  class="btn btn-secondary button myButtonClear">C</button></td>
                    </tr>
                    <tr> 
                        <td><button  class="btn btn-primary button myButtonNum">7</button></td>
                        <td><button  class="btn btn-primary button myButtonNum">8</button></td>
                        <td><button  class="btn btn-primary button myButtonNum">9</button></td>
                        <td><button  class="btn btn-secondary button myButtonSign">/</button></td>
                    </tr>
                    <tr>
                        <td><button  class="btn btn-primary button  myButtonNum">4</button></td>
                        <td><button  class="btn btn-primary button  myButtonNum">5</button></td>
                        <td><button  class="btn btn-primary button  myButtonNum">6</button></td>
                        <td><button  class="btn btn-secondary button myButtonSign">*</button></td>
                    </tr>
                    <tr>
                        <td><button  class="btn btn-primary button  myButtonNum">1</button></td>
                        <td><button  class="btn btn-primary button  myButtonNum">2</button></td>
                        <td><button  class="btn btn-primary button  myButtonNum">3</button></td>
                        <td><button  class="btn btn-secondary button myButtonSign">-</button></td>
                    </tr>
                    <tr>
                        <td><button  class="btn btn-primary button  myButtonNum">0</button></td>
                        <td><button  class="btn btn-primary button myButtonNum">.</button></td>
                        <td><button  class="btn btn-secondary button myButtonSign">+</button></td>
                        <td><button  class="btn btn-success button myButtonSum">=</button></td>
                    </tr> 
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="./index.js"></script>
</body>
</html>

js部分

let operands = []; // 用于存储操作数的数组
let operators = []; // 用于存储运算符的数组
let currentOperand = ''; // 当前正在输入的操作数
let currentSumSign = ''; // 当前正在输入的操作运算符
let displayValue = ''; // 用于显示当前输入值的变量
let prints = []; //创建输入结果的数组
let switchNum = ''
let switchNum1 = ''

// 更新显示的值
function updateDisplay() {
    document.querySelector('.result').innerText = displayValue || '0';
}

// 为数字按钮添加点击事件监听器
document.querySelectorAll('.myButtonNum').forEach(function (button) {
    button.addEventListener('click', function (event) {
        event.preventDefault();
        currentOperand += button.innerText; // 累加数字到当前操作数
        
        prints.push(currentOperand);
        currentOperand = ''
        displayValue += prints.join('');
        prints = []
        updateDisplay(); // 更新显示
        
    });
});

// 为运算符按钮添加点击事件监听器
document.querySelectorAll('.myButtonSign').forEach(function (button) {
    button.addEventListener('click', function (event) {
        event.preventDefault();
        if (currentOperand) { // 如果有正在输入的操作数，则将其加入数组
            operands.push(parseFloat(currentOperand));
            currentOperand = ''; // 重置当前操作数
        }
        currentSumSign = button.innerText;
        operators.push(currentSumSign); // 添加运算符到数组
        currentSumSign = ''
        prints.push(button.innerText)
        displayValue += prints.join('')
        prints = []
        updateDisplay();
    });
});

// 为等于号按钮添加点击事件监听器，执行计算逻辑
document.querySelector('.myButtonSum').addEventListener('click', function (event) {
    event.preventDefault();
    
    // 显示最终结果
    let result = eval(displayValue);
    
    // 重置数组和变量以便下一次计算
    operands = [];
    operators = [];
    displayValue = result.toString();// 以字符串的形式返回其内容
    updateDisplay();
    
});

// 为清除按钮添加点击事件监听器
document.querySelector('.myButtonClear').addEventListener('click', function (event) {
    event.preventDefault();
    operands = [];
    operators = [];
    currentOperand = '';
    displayValue = '';
    prints = [];
    document.querySelector('.result').innerText = displayValue;
});

// 二进制转十进制
document.querySelector('.myButtonSwitch').addEventListener('click', function (event) {
    event.preventDefault();
    if (displayValue) {
        switchNum = parseInt(displayValue, 2)
        displayValue = switchNum;
        updateDisplay();
        switchNum = ''
    }

})

// 十进制转二进制
document.querySelector('.myButtonSwitch1').addEventListener('click', function (event) {
    event.preventDefault();
    if (displayValue) {
        switchNum1 = parseInt(displayValue).toString(2)
        displayValue = switchNum1;
        updateDisplay();
        switchNum1 = ''
    }
})


document.querySelector('.myButtonBracket').addEventListener('click', function (event) {
    event.preventDefault();
    // 直接修改字符串为新字符串，直至为空
    displayValue = displayValue.slice(0, -1);
    updateDisplay();
})


window.addEventListener('error', function(event) {
    // event.error 可能包含错误对象，但不是所有浏览器都支持
    // 因此通常使用 event.message 来获取错误信息
    var errorMessage = event.message;
    alert('请注意输入格式！');

    // 防止控制台默认的错误处理（如果你不希望它出现的话）
    // 注意：在实际开发中可能需要权衡是否阻止默认行为
    // return false 或者 event.preventDefault() 可能不会在所有浏览器中按预期工作
    // event.preventDefault();
}, true); // true 表示在捕获阶段处理事件，有助于尽早捕获错误

// 故意引发一个错误以测试弹框
// generateError();

CSS部分

.button {
    width: 100%;
}
.result {
    background-color: #eee;
}

代码思路：

创建一个数组operands用于存储操作数，一个数组operators用于存储运算符。
创建一个变量currentOperand用于存储当前正在输入的操作数，一个变量currentSumSign用于存储当前正在输入的操作运算符。
创建一个变量displayValue用于显示当前输入的值。
创建一个数组prints用于创建输入结果的数组。
创建一个变量switchNum用于存储二进制转十进制的结果。

下面是该代码的主要逻辑流程和功能点的总结，以及一个简化的流程图说明。

代码逻辑与功能点总结：

初始化: 定义了多个变量和数组，用于存储操作数、运算符、当前输入值、显示内容及历史输入记录。
更新显示: updateDisplay 函数用于更新页面上显示的结果区域，展示displayValue的内容。
数字按钮处理: 当数字按钮被点击时，将点击的数字累加到currentOperand，并更新显示。同时清空prints数组，重新构建显示内容。
运算符按钮处理: 点击运算符按钮时，将当前currentOperand推入operands数组，并将运算符推入operators数组，然后更新显示为所选运算符。
等于号处理: 点击等于号时，理论上应该遍历operands和operators数组执行相应的计算（注释部分未启用），这里直接使用eval函数计算displayValue的值，然后清空相关数组和变量，显示计算结果。
清除功能: 清除按钮会重置所有的状态，准备下一轮计算。
二进制与十进制转换:
- 点击二进制转十进制按钮，尝试将当前显示的值作为二进制数转换为十进制并显示。
- 点击十进制转二进制按钮，尝试将当前显示的值作为十进制数转换为二进制并显示。
括号处理: 提供了一个点击事件监听器，但未完成具体逻辑，似乎是为了删除最后一个字符（可能用于括号处理或输入修正）。
错误处理: 添加了全局错误监听器，在发生JavaScript错误时弹出提示信息，避免控制台直接显示技术性错误信息给用户。

流程图简化描述:

开始 -> 初始化变量和数组
      |
      V
 用户操作 -> 
      |     数字按钮点击 -> 更新currentOperand & 显示
      |                    |
      |                    V
      |                  运算符按钮点击 -> 保存运算符 & 显示运算符
      |                    |
      |                    V
      |                等于号点击 -> 使用eval计算displayValue & 显示结果
      |                    |
      |                    V
      |               清除按钮点击 -> 重置所有状态
      |                    |
      |                    V
      |     二进制转十进制按钮 -> 转换并显示
      |                    |
      |                    V
      |     十进制转二进制按钮 -> 转换并显示
      |
      V
  错误监听 -> 弹窗提示错误信息
      |
      V
     结束

爱吃卤煮的王子殿下

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
基于原生html、css、js实现计算器功能

初始化: 定义了多个变量和数组，用于存储操作数、运算符、当前输入值、显示内容及历史输入记录。更新显示函数用于更新页面上显示的结果区域，展示的内容。数字按钮处理: 当数字按钮被点击时，将点击的数字累加到，并更新显示。同时清空prints数组，重新构建显示内容。运算符按钮处理: 点击运算符按钮时，将当前推入operands数组，并将运算符推入operators数组，然后更新显示为所选运算符。等于号处理: 点击等于号时，理论上应该遍历operands和operators。
复制链接

扫一扫