js实现简单计算器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            margin: 30px auto;
            border: 1px solid;
            user-select: none;
        }

        .container nav {
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid;
        }

        .container>div {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .container>input {
            width: 99%;
            height: 50px;
            border: none;
            outline: none;
            font-size: 30px;
        }

        .container>div>div {
            width: 24%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid;
            border-radius: 5px;
            margin-bottom: 5px;
            transition: .5s;
            /* background-color: ; */
        }
    </style>
</head>

<body>
    <div class="container">
        <nav>
            <span>计算器</span>
        </nav>
        <input type="text" id="inp">
        <div id="bigdiv">
            <div id="ss">%</div>
            <div id="fang">平方</div>
            <div id="clear">clear</div>
            <div id="chu">÷</div>
            <div id="">7</div>
            <div id="">8</div>
            <div id="">9</div>
            <div id="cheng">*</div>
            <div id="">4</div>
            <div id="">5</div>
            <div id="">6</div>
            <div id="jian">-</div>
            <div id="">1</div>
            <div id="">2</div>
            <div id="">3</div>
            <div id="jia">+</div>
            <div id="">clear</div>
            <div id="">0</div>
            <div id="dian">.</div>
            <div id="over">=</div>
        </div>
    </div>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        var str = '';
        var str1 = '';
        var result;
        function chuli() {
            result = $('inp').value.split(str1);
        }
        for (var j = 0; j < $('bigdiv').children.length; j++) {
            (function (i) {
                $('bigdiv').children[i].onclick = function (e) {
                    for (var j = 0; j < $('bigdiv').children.length; j++) {
                        $('bigdiv').children[j].style.background = '';
                        $('bigdiv').children[j].style.color = '';
                    }
                    this.style.background = 'black';
                    this.style.color = 'white';
                    if (!isNaN(this.innerHTML)) {
                        str = this.innerHTML;
                        $('inp').value = $('inp').value + str;
                    } else if (this.innerHTML === 'clear') {
                        $('inp').value = '';
                        str = '';
                        str1 = '';
                        result = null;
                        for (var j = 0; j < $('bigdiv').children.length; j++) {
                            $('bigdiv').children[j].style.background = '';
                            $('bigdiv').children[j].style.color = '';
                        }
                    } else if (this.id === 'dian') {
                        if (str !== '.') {
                            str = this.innerHTML;
                            $('inp').value = $('inp').value + str;
                        }
                    } else if (this.id === 'over') {
                        chuli();
                        if (!($('inp').value.indexOf('+') === -1)) {
                            $('inp').value = Number(result[0]) + Number(result[1]);
                        } else if (!($('inp').value.indexOf('-') === -1)) {
                            $('inp').value = Number(result[0]) - Number(result[1]);
                        } else if (!($('inp').value.indexOf('*') === -1)) {
                            $('inp').value = Number(result[0]) * Number(result[1]);
                        } else if (!($('inp').value.indexOf('÷') === -1)) {
                            $('inp').value = Number(result[0]) / Number(result[1]);
                        } else if (!($('inp').value.indexOf('%') === -1)) {
                            $('inp').value = Number(result[0]) % Number(result[1]);
                        } else if (!($('inp').value.indexOf('平方') === -1)) {
                            if (!result[1]) {
                                $('inp').value = Math.pow(Number(result[0]),2);
                            }else {
                                $('inp').value = Math.pow(Number(result[0]), Number(result[1]));
                            }
                        }
                        str = $('inp').value;
                        str1 = '';
                        result = null;
                        if ($('inp').value === 'NaN') {
                            $('inp').value = '请输入正确参数';
                        }
                    } else {
                        // 运算符只能输入一次且不能在开头输入
                        if (!str1 && str) {
                            str1 = this.innerHTML;
                            $('inp').value = $('inp').value + str1;
                        }
                    }
                }
            })(j)
        }
js实现简单计算器

猜你喜欢
