纯javascript实现计算器的各种功能

最新推荐文章于 2022-07-02 23:58:02 发布

㼛思雨

最新推荐文章于 2022-07-02 23:58:02 发布

阅读量185

点赞数

分类专栏： Javascript 文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_45147894/article/details/108812563

版权

Javascript 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

要求实现如下面展示一样的一个计算器：

具体代码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        /*配套案例CSS样式参考*/
        #calcuator {
            width: 200px;
            height: 245px;
            padding: 10px;
            border: 1px solid #e5e5e5;
            background: #f8f8f8;
            margin: 0px auto;
        }

        #calcuator #input-box {
            margin: 0;
            width: 187px;
            padding: 9px 5px;
            border: 1px solid #e5e5e5;
            text-align: right;
        }

        #calcuator #btn-list {
            width: 200px;
        }

        #calcuator #btn-list .btn-radius {
            text-align: center;
            line-height: 29px;
            float: left;
            margin-left: 11px;
            margin-top: 11px;
            cursor: pointer;
            border: 1px #0CF solid
        }

        #calcuator #btn-list .btn-30 {
            width: 29px;
            height: 29px;
        }

        #calcuator #btn-list .btn-70 {
            width: 70px;
            height: 29px;
        }

        #calcuator #btn-list .clear-marginleft {
            margin-left: 0;
        }

        #calcuator #btn-list .font-14 {
            font-size: 14px;
        }

        #calcuator #btn-list .color-red {
            color: #ff5050
        }

        #calcuator #btn-list .color-blue {
            color: #00b4ff
        }
    </style>


</head>

<body>
    <div id="calcuator">
        <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readinly" />
        <div id="btn-list">
            <div onClick="s('')" class="btn-30 btn-radius color-red clear-marginleft">C</div>
            <div onClick="operator('opposite')" class="btn-30 btn-radius color-blue">+/-</div>
            <div onClick="operator('percent')" class="btn-30 btn-radius color-blue">%</div>
            <div onClick="operator('backspace')" class="btn-70 btn-radius color-red font-14">
                &lt--</div>
                 <div onClick="a('7')" class="btn-30 btn-radius clear-marginleft">7
            </div>
            <div onClick="a('8')" class="btn-30 btn-radius">8</div>
            <div onClick="a('9')" class="btn-30 btn-radius">9</div>
            <div onClick="a('+')" class="btn-30 btn-radius color-blue font-14">+</div>
            <div onClick="a('-')" class="btn-30 btn-radius color-blue font-14">-</div>
            <div onClick="a('4')" class="btn-30 btn-radius clear-marginleft">4</div>
            <div onClick="a('5')" class="btn-30 btn-radius">5</div>
            <div onClick="a('6')" class="btn-30 btn-radius">6</div>
            <div onClick="a('*')" class="btn-30 btn-radius color-blue font-14">*</div>
            <div onClick="a('/')" class="btn-30 btn-radius color-blue font-12">÷</div>
            <div onClick="a('1')" class="btn-30 btn-radius clear-marginleft">1</div>
            <div onClick="a('2')" class="btn-30 btn-radius">2</div>
            <div onClick="a('3')" class="btn-30 btn-radius">3</div>
            <div onClick="operator('pow')" class="btn-30 btn-radius color-blue font-14">x^</div>
            <div onClick="operator('sqrt')" class="btn-30 btn-radius color-blue font-12">√</div>
            <div onClick="a('0')" class="btn-70 btn-radius clear-marginleft">0</div>
            <div onClick="a('.')" class="btn-30 btn-radius">.</div>
            <div onClick="e()" class="btn-70 btn-radius color-red font-14">=</div>
        </div>

        <script>
            input = document.getElementById('input-box');

            function s(v) {
                input.value = v
            }

            function a(v) {
                input.value += v
            }

            function e() {
                try {
                    s(eval(input.value))
                } catch (e) {
                    s('Error')
                }
            }


            function operator(type) {
                switch (type) {
                    case "backspace":
                        var str = input.value;
                        //str = (str != "0") ? str : "";
                        str = str.substr(0, str.length - 1);
                        str = (str != "") ? str : "0";
                        input.value = str;
                        break;
                    case "opposite":
                        input.value = -input.value;
                        break;
                    case "percent":
                        input.value = input.value / 100;
                        break;
                    case "pow":
                        input.value = Math.pow(input.value, 2);
                        break;
                    case "sqrt":
                        input.value = Math.sqrt(input.value);
                        break;
                }
            }
        </script>

</body>

</html>

分析如下：

㼛思雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯javascript实现计算器的各种功能

要求实现如下面展示一样的一个计算器：具体代码如下：<!doctype html><html><head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> /*配套案例CSS样式参考*/ #calcuator { width: 200px;
复制链接

扫一扫

专栏目录