js实现计算器效果

最新推荐文章于 2024-04-27 05:36:48 发布

Yel_Liu

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量976

点赞数 2

分类专栏： js 文章标签： js 计算器

本文链接：https://blog.csdn.net/Yel_Liu/article/details/83503955

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

公司有道面试题是实现计算器的效果，所有面试者都是进行了很复杂的判断来计算的，甚至使用了正则表达式进行验证，其实本题只是考察js基础知识，关于计算只要使用eval()方法就可以得到结果

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

eval()方法工作中不常用（至少我很少用到），面试者应该是在这样的情况下没有想到该方法而已，下面给出代码，代码中只做了简单的判断，大家使用时可根据需要做调整

<!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>
        * {
            box-sizing: border-box;
        }
        .container {
            width: 300px;
            height: 500px;
            background: rgba(255, 167, 167, 0.1);
            padding: 25px 15px;
            color: #10dada;
        }
        .showbox {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 25px;
            background: #fff;
            text-align: right;
            padding: 0 10px;
        }
        .item {
            float: left;
            width: 58px;
            height: 58px;
            line-height: 58px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            text-align: center;
            font-size: 20px;
            cursor: pointer;

        }
        .item:hover {
            box-shadow: 0 0 3px 3px #eee;
        } 
        .panel {
            overflow: hidden;
            margin-top: 20px;
        }
    </style>
    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="showbox process"></div>
        <div class="showbox result"></div>
        <div class="panel">
            <div class="item">c</div>
            <div class="item">(</div>
            <div class="item">)</div>
            <div class="item">/</div>

            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">*</div>

            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">-</div>

            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">+</div>

            <div class="item">0</div>
            <div class="item">.</div>
            <div class="item">del</div>
            <div class="item">=</div>
        </div>
    </div>
    <script>
        var process = '';   // 计算式子
        var result = '';    // 计算结果
        var flag = false;   // 是否为显示计算结果状态
        $('.panel').on('click', '.item', function (e) {
            var text = this.innerHTML;      // 获取被点击按钮的文本信息
            if (flag) {                     // 当前为显示结果状态
                process = '';
                result = '';
                flag = false;
            }
            if (text === 'c') {
                process = '';
                result = '';
            } else if (text === 'del') {
                process = process.slice(0, -1);
            } else if (text === '=') {     
                try {
                    result = eval(process);
                } catch (e) {
                    result = '错误'
                }
                flag = true;
            } else {
                process += text;
            }
            $('.process').html(process);
            $('.result').html(result);
        })
    </script>
</body>
</html>

下面是结果图，分别为正确计算和错误的显示

Yel_Liu

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现计算器效果

公司有道面试题是实现计算器的效果，所有面试者都是进行了很复杂的判断来计算的，甚至使用了正则表达式进行验证，其实本题只是考察js基础知识，关于计算只要使用eval()方法就可以得到结果eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 eval()方法工作中不常用（至少我很少用到），面试者应该是在这样的情况下没有想到该方法而已，下面给出代码，代码中只做了简单的...
复制链接

扫一扫