原生JS怎么实现简单计算器功能

本篇内容主要讲解"原生JS怎么实现简单计算器功能"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"原生JS怎么实现简单计算器功能"吧!

使用html和css写出计算器的基本结构和样式，用原生JS实现计算器的加减乘除运算功能，只能计算简单的两位数的运算，不支持三个数连加或者连乘等等。一次计算完成之后再进行下一次运算不需要clear，可以直接进行下次运算。具体实现如下：

html结构：

                            
1
        
2
        
3
        
+
        
4
        
5
        
6
        
-
        
7
        
8
        
9
        
*
        
C
        
0
        
=
        
/

css样式：

#box {            width: 500px;            height: 600px;            border: 1px solid #000000;        }         #display {            width: 460px;            height: 60px;            margin: 15px;            text-align: right;            font-size: 60px;            line-height: 60px;            overflow: hidden;            /* overflow: hidden;  溢出隐藏 */            /* text-overflow: ellipsis;  文本溢出时显示省略号  */            /* word-wrap: none;   强制不换行 */            background: #ffffff;        }         .btn {            width: 100px;            height: 100px;            border: 1px solid #000000;            float: left;            margin: 10px 11px;            font-size: 40px;            line-height: 100px;            text-align: center;            user-select: none; }

JS代码：

firstValue这个全局变量存储第一次输入的数，input的input.value属性也是一个变量，这个值既作为页面上显示的内容，也是输入的数值。让这两个值进行运算，结果再显示到输入框中即可。bool变量作用：当一次运算完成之后所有数值清零。

如果要实现用上一次的结果继续参与运算这个功能，可以再设置一个全局变量result来存储每次运算后的结果，当下次输入运算符号时，判断firstValue和result，再决定用哪个值计算。当点击C按钮时，所有值清空，返回初始状态。

var input = document.getElementById("display");var btnCollection = document.getElementsByClassName("btn");var type;var firstValue = 0;var bool = false;    for (var i = 0; i < btnCollection.length; i++) {   // 获取到每个按键并添加点击事件。点击后会触发function中代码执行。            btnCollection[i].onclick = function () {                if(bool){                    input.value = "0";                    firstValue = 0;                    type = undefined;                    bool = false;                }                 // input.value = this[xss_clean];      //显示点击的数字在文本框内                 if (!isNaN(Number(this[xss_clean]))) {                    input.value = Number(input.value + this[xss_clean]).toString();                } else if (this[xss_clean] !== "C" && this[xss_clean] !== "=") {                    firstValue = Number(input.value);                    type = this[xss_clean];                    input.value = 0;                } else if (this[xss_clean] === "C") {                    firstValue = 0;                    type = undefined;                    input.value = "0";                } else {                    switch (type) {                        case "+":                            input.value = (Number(input.value) + firstValue).toString();                            break;                        case "-":                            input.value = (firstValue - Number(input.value)).toString();                            break;                        case "*":                            input.value = (Number(input.value) * firstValue).toString();                            break;                        case "/":                            input.value = (firstValue / Number(input.value)).toString();                            break;                    }                    bool = true;                }            }        }

到此，相信大家对"原生JS怎么实现简单计算器功能"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！