亲宝软件园·资讯

展开

JS实现简单计算器功能

weixin_51276799 人气:0

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

html结构:

<div id="box">
        <!-- 文本框要禁止用户输入,只能通过代码中的input.value来修改 -->
        <input id="display" type="text" value="0" disabled>    
        <div class="btn">1</div>
        <div class="btn">2</div>
        <div class="btn">3</div>
        <div class="btn">+</div>
        <div class="btn">4</div>
        <div class="btn">5</div>
        <div class="btn">6</div>
        <div class="btn">-</div>
        <div class="btn">7</div>
        <div class="btn">8</div>
        <div class="btn">9</div>
        <div class="btn">*</div>
        <div class="btn">C</div>
        <div class="btn">0</div>
        <div class="btn">=</div>
        <div class="btn">/</div>
</div>

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.innerHTML;      //显示点击的数字在文本框内
 
                if (!isNaN(Number(this.innerHTML))) {
                    input.value = Number(input.value + this.innerHTML).toString();
                } else if (this.innerHTML !== "C" && this.innerHTML !== "=") {
                    firstValue = Number(input.value);
                    type = this.innerHTML;
                    input.value = 0;
                } else if (this.innerHTML === "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;
                }
            }
        }

加载全部内容

相关教程
猜你喜欢
用户评论