蓝桥杯数字检索

最新推荐文章于 2024-08-14 10:08:54 发布

xiaobai_qxjn

最新推荐文章于 2024-08-14 10:08:54 发布

阅读量88

点赞数 1

文章标签： javascript 正则表达式 jquery 蓝桥杯

本文链接：https://blog.csdn.net/xiaobai_qxjn/article/details/126268825

版权

蓝桥杯——7月专场

题目：你能看出有多少位吗？

解决方式：每次添加数字依次添加到数组当中；当删除时，删除最后一个值

原样式和结构，改动 script

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 控制浏览器缓存 -->
    <meta http-equiv="Cache-Control" content="no-store" />
    <title>你能看出有多少位吗？</title>
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style05.css">
</head>

<body>
    <div class="wrap">
        <form action="" class="edit-cash">
            <p>消费总额</p>
            <div class="shuru">
                <span>&yen;</span>
                <div id="input-box"></div>
            </div>
            <p>可询问工作人员应缴费用总额</p>
        </form>
        <input type="submit" value="支付" class="submit" />
    </div>
    <div class="layer"></div>
    <div class="form">
        <form action="" method="post">
            <input type="text" placeholder="姓名" />
            <input type="text" placeholder="联系电话" />
            <input type="submit" value="提交" class="infor-sub" />
        </form>
    </div>
    <div class="layer-content">
        <div class="form-edit clearfix">
            <div class="num num1">1</div>
            <div class="num num2">2</div>
            <div class="num num3">3</div>
            <div class="num num4">4</div>
            <div class="num num5">5</div>
            <div class="num num6">6</div>
            <div class="num num7">7</div>
            <div class="num num8">8</div>
            <div class="num num9">9</div>
            <div class="num num0">0</div>
            <div id="remove">删除</div>
        </div>
    </div>
    <script src="https://labfile.oss.aliyuncs.com/courses/9203/jquery.min.js"></script>
    <script>
        $(function () {
            $('.infor-sub').click(function (e) {
                $('.layer').hide();
                $('.form').hide();
                e.preventDefault();		//阻止表单提交
            })

            $('.shuru').click(function (e) {
                $('.layer-content').animate({
                    bottom: 0
                }, 200)
                e.stopPropagation();
            })
            $('.wrap').click(function () {
                $('.layer-content').animate({
                    bottom: '-200px'
                }, 200)
            })

            $('.form-edit .num').click(function () {
                var oDiv = document.getElementById("input-box");
                // count("add",this.innerHTML)
                oDiv.innerHTML = count("add", this.innerHTML);
            })
            $('#remove').click(function () {
                var oDiv = document.getElementById("input-box");
                console.log(oDiv.innerHTML);
                console.log("----------");
                // 改写输入的内容
                oDiv.innerHTML = count("sub")
            })
        })
        let dataArray = []
        function changeArray(array) {
            array = JSON.parse(JSON.stringify(array))
            if (array.length > 3) {
                return array.join("").replace(/(?=\B(\d{3})+$)/g, ",")
            } else {
                return array.join("")
            }
        }

        function count(option, str = null) {
            if (option == "add") {
                dataArray.push(str)
            } else {
                dataArray.pop()
            }
            return changeArray(dataArray)
        }
    </script>
</body>

</html>