js+css实现计算器功能

本文实例为大家分享了js+css实现计算器功能的具体代码，供大家参考，具体内容如下

目前仅实现了最基础的运算功能

(因为是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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。