标签：last color text height else 低仿 js css first

目前仅实现了最基础的运算功能
(因为是js的运算内核，有些小数点计算并不准确，懒得去做去小数点后几位的操作）

一、最终呈现的视图效果

二、思路
代码量有点多，没办法。一开始只是无聊随便写的，没有构思，越写到后面越冗杂，自己又不想重新推翻去写。

三、代码逻辑

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 350px;
            height: 530px;
            position: relative;
            background-color: #E6E6E6;
            border: 1px solid #000;
            margin: 100px auto;
            /* overflow: hidden; */
            box-shadow: 0px 0px 10px #888888;
        }
        .header {
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }
        .header span {
            float: left;
            font-weight: 600;
            font-size: 12px
        }
        .tabNav {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            padding: 0 10px;
            background-color: #fff;
            border-radius: 6px;
            position: absolute;
            left: 53px;
            top: 2px;
            box-shadow: 0px 0px 10px #888888;
            display: none;
        }
        .tabNav2 {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            padding: 0 10px;
            background-color: #fff;
            border-radius: 6px;
            position: absolute;
            left: -50px;
            top: -30px;
            box-shadow: 0px 0px 10px #888888;
            display: none;
        }
        .pattern {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
        .pLeft {
            display: flex;
        }
        .pLeft>div,
        .pRight {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .pLeft>div>span,
        .pRight>span {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 1px solid #000;
        }
        #allView {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: none;
        }

        #allView span {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 1px solid #000;
        }

        .Mstyle {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            font-weight: bold;
            color: #B8B8B8;
            margin-bottom: 2px;

        }

        .Mstyle span {
            width: 15.66%;
            text-align: center;
        }

        .special {
            color: #000;
        }

        .list {
            list-style: none;
            /* background-color: #333; */
            width: 99%;
            height: 275px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        ul li {
            /* float: left; */
            width: 24.6%;
            height: 19%;
            margin-bottom: 1.5px;
        }

        button {
            border: none;
            width: 100%;
            height: 100%;
            background-color: #FAFAFA;
        }

        /*取消button点击的默认样式*/
        button:focus {
            border: 0 none;
            outline: none;
        }

        .view {
            height: 100px;
            /* line-height: 100px; */
            display: flex;
            flex-wrap: wrap;
            text-align: right;
            padding-right: 10px;
        }

        #calculation {
            font-size: 14px;
            color: #777;
            width: 100%;
        }

        #val {
            font-size: 43px;
            font-weight: bold;
            width: 100%;
        }

        .btn {
            background-color: #8abae0;
        }

        /* hover不同颜色值设置 */
        .colorChange {
            border: 1px solid #E6E6E6;
        }

        .newColor {
            background-color: #F0F0F0;
        }

        .ortherColor {
            font-weight: bold;
            font-size: 18px;
        }
    </style>

    <div class="content">
        <div class="header">
            <span>计算器</span>
        </div>
        <div class="tabNav">
            保持在顶部 (Alt + Up)
        </div>
        <div class="tabNav2">
            返回全视图 (Alt + Down)
        </div>
        <div class="pattern">
            <div class="pLeft">
                <div class="colorChange">
                    <span></span>
                </div>
                <div style="width:45px;font-size: 20px;font-weight: bold;">标准</div>
                <!-- 懒得去找图片，手动画个正方形代替 -->
                <div class="colorChange" id="keep">
                    <span></span>
                </div>
            </div>
            <!-- 懒得去找图片，手动画个正方形代替 -->
            <div class="pRight colorChange">
                <span></span>
            </div>
        </div>
        <!-- 全视图显示的操作按钮 -->
        <div class="colorChange" id="allView" style="width: 40px;height:30px;line-height: 30px;text-align:center;">
            <span></span>
        </div>
        <div class="view">
            <span id="calculation"></span>
            <span id='val'>0</span>
        </div>
        <div class="Mstyle">
            <span>MC</span>
            <span>MR</span>
            <span class="special colorChange">M+</span>
            <span class="special colorChange">M-</span>
            <span class="special colorChange">MS</span>
            <span>M-</span>
        </div>
        <ul class="list">
            <li><button class="newColor">%</button></li>
            <li><button class="newColor">CE</button></li>
            <li><button id="c24" class="newColor">C</button></li>
            <li><button class="newColor">无效</button></li>
            <li><button class="newColor">1/x</button></li>
            <li><button class="newColor">x²</button></li>
            <li><button class="newColor">x^</button></li>
            <li><button class="newColor" id="except">÷</button></li>
            <li><button value="7" class="ortherColor">7</button></li>
            <li><button value="8" class="ortherColor">8</button></li>
            <li><button value="9" class="ortherColor">9</button></li>
            <li><button id="ride" class="newColor">x</button></li>
            <li><button value="4" class="ortherColor">4</button></li>
            <li><button value="5" class="ortherColor">5</button></li>
            <li><button value="6" class="ortherColor">6</button></li>
            <li><button id="reduce" class="newColor">-</button></li>
            <li><button value="1" class="ortherColor">1</button></li>
            <li><button value="2" class="ortherColor">2</button></li>
            <li><button value="3" class="ortherColor">3</button></li>
            <li><button id="add" class="newColor">+</button></li>
            <li><button style="font-size:18px;">+/-</button></li>
            <li><button value="0" class="ortherColor">0</button></li>
            <li><button id="spot" style="font-size: 20px;">.</button></li>
            <li><button class="btn" id="equal">=</button></li>
        </ul>
    </div>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        // 鼠标事件
        $('.colorChange').hover(function () {
            console.log(window.event.clientX)
            console.log(window.event.clientY)
            if (this.id == 'keep') {
                $('.tabNav').fadeIn(700)
            } else if (this.id == 'allView') {
                $('.tabNav2').fadeIn(700)
            }

            $(this).css('background-color', '#d7d7d7')
            $(this).css('border', '1px solid #999')
        }, function () {
            $('.tabNav').fadeOut(100)
            $('.tabNav2').fadeOut(100)
            $(this).css('background-color', '#E6E6E6')
            $(this).css('border', '1px solid #E6E6E6')
        })


        // 全视图操作
        $('#allView').click(function () {
            $('.header,.pattern,.Mstyle').show()
            $('#allView').hide()
            $('.content').css('height', '530px')
        })
        $("#keep").click(function () {
            $('.header,.pattern,.Mstyle').hide()
            $('#allView').show()
            $('.content').css('height', '456px')
        })
		// 所有按钮的hover
        $('button').hover(function () {
            $(this).css('background-color', '#d7d7d7')
            $(this).css('border', '1px solid #999')
        }, function () {
            if ($(this).attr('class') == 'newColor') {
                $(this).css('background-color', '#F0F0F0')
                $(this).css('border', 'none')
            } else {
                $(this).css('background-color', '#fff')
                $(this).css('border', 'none')
            }
        })

        // 鼠标放在等于号的事件
        $(".btn").hover(function () {
            $(".btn").css("background-color", "#4599db");
        }, function () {
            $(".btn").css("background-color", "#8abae0");
        });
    </script>
    <script>
        // 获取 dom
        var listText = $('#calculation');
        var inputValue = $('#val');
        // 运算的第一个值
        var first = 0;
        // 运算的第二个值
        var last = 0;
        // 用来区分为第一个还是第二个赋值
        var panduan = '1';
        // 记录运算的符号
        var sum = '';
        // 记录是否为小数点状态
        var isXiao = false;
        // 用来阻止用户多次点击小数点
        var dianNum = 0;
        // 用来记录是否进行过计算
        var isjisuan = false;

        // 所有按钮的点击事件
        $("button").click(function () {
            var id = this.id
            // 区分数字和运算符号
            if (this.value) {
                // 判断是否是经过计算后的
                if (!isjisuan) {
                } else {
                    inputValue.text(0)
                    listText.text(0)
                    // inputValue.value = 0
                    first = 0;
                    last = 0;
                    sum = '';
                    panduan = '1';
                    isXiao = false;
                    dianNum = 0;
                    isjisuan = false
                }
                // 判断是否是小数
                if (isXiao) {
                    // 判断是否为第一个值
                    if (panduan == '1') {
                        if (first && first.indexOf('.') == -1) {
                            first = first + '.' + this.value
                        } else {
                            first += this.value
                        }
                        inputValue.text(Number(first))
                    } else {
                        if (last && last.indexOf('.') == -1) {
                            last = last + '.' + this.value
                        } else {
                            last += this.value
                        }
                        inputValue.text(Number(last))
                        inputValue.value = Number(last)
                    }
                } else {
                    // 判断是否为第一个值
                    if (panduan == '1') {
                        first += this.value
                        inputValue.text(Number(first))
                    } else {
                        last += this.value
                        inputValue.text(Number(last))
                    }
                }
            } else {
                isjisuan = false
                // 判断具体是哪个运算符号的点击事件
                if (id == 'equal') { // 等于事件
                    if (last) {
                        isjisuan = true
                        listText.text(Number(first) + sum + Number(last) + '=   ')
                        inputValue.text(eval(Number(first) + sum + Number(last)))
                    } else {
                        inputValue.text(Number(first))
                    }
                    first = inputValue.text()
                    last = 0
                    panduan = '1';
                    sum = '';
                } else if (id == 'add') { // 相加
                    operation('+')
                } else if (id == 'reduce') { // 相减
                    // sum = '-'
                    operation('-')
                } else if (id == 'ride') { // 相乘
                    // sum = '*'
                    operation('*')
                } else if (id == 'except') { // 相除
                    // sum = '/'
                    operation('/')
                } else if (id == 'spot') {
                    // 阻止多次点击小数点
                    if (dianNum >= 1) {
                        return
                    }
                    isXiao = true
                    dianNum = 1
                } else if (id == 'c24') { // 清除所有的东西

                    inputValue.text(0)
                    listText.text(0)
                    // inputValue.value = 0
                    first = 0;
                    last = 0;
                    sum = '';
                    panduan = '1';
                    isXiao = false;
                    dianNum = 0;
                    isjisuan = false
                }
            }
        })
        // 用来处理多次点击运算符号的函数
        function operation(sysbols) {
            // 判断 值是否存在小数，若存在清一下小数点点击次数的状态
            dianNum = 0
            // 清一下为小数赋值的状态
            isXiao = false
            panduan = '2'
            // 用来区分是否是连续点击运算符号
            if (!last) {
                listText.text(Number(first) + sysbols)
            } else {
                // 用来识别 储存运算符号的变量
                console.log(listText.text(), '1')
                first = eval(Number(first) + sum + Number(last))
                last = 0
                inputValue.text(first)
                listText.text(first + sysbols)
            }
            sum = sysbols
        }
    </script>

标签：last,color,text,height,else,低仿,js,css,first
来源： https://blog.csdn.net/weixin_47142897/article/details/116062375

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。