jq——手写计算器

先抛效果图
由于工作的时间关系，只写了点击的并没绑定小键盘，下一版吧
<!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">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        main {
            width: 375px;
            height: 667px;
            background-image: -moz-linear-gradient( -41deg, rgb(255, 175, 89) 0%, rgb(255, 84, 76) 100%);
            background-image: -webkit-linear-gradient( -41deg, rgb(255, 175, 89) 0%, rgb(255, 84, 76) 100%);
            background-image: -ms-linear-gradient( -41deg, rgb(255, 175, 89) 0%, rgb(255, 84, 76) 100%);
            margin: 0 auto;
        }

        header {
            width: 100%;
            height: 200px;
            font-size: 32px;
            color: #fff;
            text-align: right;
        }

        .Result {
            width: 100%;
            height: 80px;
            word-break: break-all;
            background: rgba(255, 255, 255, 0.2);
            box-sizing: border-box;
            padding: 10px;
        }

        .formula {
            width: 100%;
            height: 100px;
            word-break: break-all;
            line-height: 36px;
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.2);
            margin-bottom: 10px;
            box-sizing: border-box;
            padding: 10px;
        }

        section {
            width: 100%;
            height: 467px;
        }

        ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        li {
            font-family: "微软雅黑";
            width: 90px;
            height: 90px;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 45px;
            text-align: center;
            line-height: 90px;
            cursor: pointer;
            border-radius: 5px
        }

        li:active {
            background: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>

<body>
    <main>
        <header>
            <!-- 公式 -->
            <div class="formula"></div>
            <!-- 计算结果 -->
            <div class="Result"></div>
        </header>
        <section>
            <ul>
                <li symbol="C">C</li>
                <li symbol="d">DEL</li>
                <li symbol="-">-</li>
                <li symbol="÷">÷</li>
                <li symbol="7">7</li>
                <li symbol="8">8</li>
                <li symbol="9">9</li>
                <li symbol="×">×</li>
                <li symbol="4">4</li>
                <li symbol="5">5</li>
                <li symbol="6">6</li>
                <li symbol="-">-</li>
                <li symbol="1">1</li>
                <li symbol="2">2</li>
                <li symbol="3">3</li>
                <li symbol="+">+</li>
                <li symbol="0">0</li>
                <li symbol=" "></li>
                <li symbol=".">.</li>
                <li id="ok" symbol="=">=</li>
            </ul>
        </section>
    </main>
</body>
<script src="./js/jquery.js"></script>
<!-- <script src="./js/index.js"></script> -->
<script>
    var formula = ''  //计算公式
    let Result = ''  //计算结果
    let lsformula = ''
    let jieguo = false
    let denghao = false
    let point = false
    let lsNum = ''
    function add(val) {
        $('.formula').css('color', '#fff')
        // 按了等号之后再按按键就清空重新输入
        if (jieguo) {
            formula = ''
            $('.Result').text(Result)
            $('.formula').text(formula)
            jieguo = false
        }
        // 清除事件
        if (val == 'C') {
            formula = ''
            Result = ''
            $('.Result').text(Result)
            $('.formula').text(formula)
            return
        }

        // 核心计算逻辑
        // 如果输入的是数字
        let numberstr = '0123456789.'
        for (let i of numberstr) {

            if (val == i) {
                denghao = false
                if (jieguo) {
                    Result = ''
                    console.log('数字点击出来的' + Result)
                }
                point = false
                // 如果输入的是0，判断当前输入的数字是否0开头
                if (i == '0' && lsNum[0] == 0 && lsNum[1] != '.') {
                    console.log('开头有0了')
                    return
                }
                // 如果输入的是.
                // 判断多个浮点，同一个数字内如果有一个浮点将不会出现第二个浮点
                // 设置一个布尔值默认值false，如果点击符号改成true，点击数字变成false，

                if (val == '.' && lsNum.length != 0 && !point && lsNum.indexOf('.') != '-1') {
                    // console.log('走到这里表示已经有点了')
                    return
                }
                // if(val==0&&lsNum[0]==0&&!point){
                //     point = true
                //     return 
                // }
                console.log(lsNum)
                formula += i
                lsNum += i
            }
        }
        // 如果输入的是符号
        let symbol = '+-×÷%'
        for (let j of symbol) {

            if (val == j) {
                console.log('符号点击出来的' + Result)
                // 判断是否第一个就是符号，如果第一个就是符号return出去
                if (formula.length == 0 && !denghao) {
                    console.log('第一个符号走进来了' + formula.length)
                    return
                }
                // 如果连续输入符号 
                for (let n of symbol) {
                    if (formula[formula.length - 1] == n || formula[0] == n) {
                        return
                    }
                }
                for (let m of formula) {

                }

                lsNum = ''
                point = true
                // 如果在摁等于号以后再嗯符号，继续上一个结果计算
                if (!jieguo && denghao) {
                    formula += j
                    formula = Result + formula
                    $('.formula').text(formula)
                    return
                }
                formula += j
            }
        }
        if (val == 'd' && formula.length != 0) {
            formula = formula.slice(0, formula.length - 1)
        }
        // 等于事件
        if (val == '=') {
            if (formula == '') {
                return
            }
            // 判断按下等号的时候是否最后一位为符号
            for (let n of symbol) {
                if (formula[formula.length - 1] == n) {
                    return
                }
            }
            // 替换特殊字符
            formula = formula.replace(/×/g, "*")
            formula = formula.replace(/÷/g, "/")
            // 得出计算结果
            Result = eval("(" + formula + ")")
            // 保留小数点后5位
            Result = Math.round(Result * 100000) / 100000
            jieguo = true
            denghao = true
            lsNum = ''
            $('.Result').text(Result)
            if (Result.toString().length > 16) {
                $('.Result').css({
                    fontSize: 24
                })
            }
            $('.formula').css('color', '#d1d1d1')
            return
        }
        if (formula.length > 16) {
            $('.formula').css({
                fontSize: 24
            })
        }
        if (formula.length > 24) {

        }

        $('.formula').text(formula)
    }
    $('ul').on('click', 'li', function () {
        add($(this).attr('symbol'))
        // return false
    })
</script>

</html>
方法比较笨拙，不喜勿喷
jq——手写计算器

猜你喜欢
