车辆模拟选号

此乃逍遥游
已于 2023-08-25 11:02:10 修改
阅读量449
点赞数
文章标签： javascript
于 2023-08-25 11:01:21 首次发布
本文链接：https://blog.csdn.net/weixin_42451714/article/details/132491123
版权
车辆模拟选号

- 图片展示
- 代码如下
图片展示

在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    h1{
        margin: 40px;
    }
    table {
        border-collapse: collapse;
        border: 1px solid #fff;
        margin: 40px;
        background: #eee;
    }
    .buit_Div {
        padding: 12px 0;
        background: #ffffff;
        color: #000;
        font-weight: bold;
        width: 110px;
        text-align: center;
        border: 1px solid #9E9E9E;
        cursor: pointer;
        text-indent: 12px;
        position: relative;
        margin: 4px 8px;
    }
    .buit_Div::after{
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background: #9E9E9E;
        position: absolute;
        left: 16px;
        border-radius: 4px;
        top: 18px;
    }

    .buit_Div.active {
        background: #FFC107;
    }

    .hide {
        display: none;
    }
    input{
        width: 100px;
        height: 34px;
        line-height: 34px;
        background: #262af5;
        color: #fff;
        text-align: center;
        outline: none;
        border: none;
        cursor: pointer;
    }
</style>


<body onload="create_Div()">
    <center>
        <h1>🚗摇号 <span id="quyu"></span></h1>
        <table rules="all" id="table_html">

        </table>
        <div class="chooseArr">
            选中的号码有：
            <table>
                <tr id="chooseArray"></tr>
            </table>
        </div>
        <input type="button" value="开始" onclick="start_Chose(this.value)" />
        <input type="button" class="hide" id="isOk" value="确定" onclick="is_ok()" />
    </center>
</body>
<script type="text/javascript">
    // 定义车牌区间数，现在的车牌后面数可能会有字母与数字混合，需要重新定义随机车牌函数
    var ran_Num1, ran_Alph1, ran_Num2;
    var alph=new Array("苏A", "苏B", "苏C", "苏D", "苏E", "苏F", "苏G", "苏H", "苏J", "苏K", "苏V");
    var alph2=new Array();
    for(var i=0;i<26;i++) {
        alph2.push(String.fromCharCode(65+i));
    }
    // 区域
    document.getElementById("quyu").innerHTML = alph[0];
    // 随机生成一个车牌号
    function carNum_Ran() {
        ran_Alph1=Math.floor(Math.random()*11); //前2位车牌号
        ran_Num1=Math.floor(Math.random()*900+100); //第3-5位
        ran_Alph2=Math.floor(Math.random()*26); //倒数第2位
        ran_Num2=Math.floor(Math.random()*10); //最后一位
        // 苏A 取 alph[0]
        // let cars_Ran=alph[0]+ran_Num1+alph2[ran_Alph2]+ran_Num2;
        let cars_Ran=ran_Num1+alph2[ran_Alph2]+ran_Num2;
        return cars_Ran;
    }

    /*创建DIV、根据单元格Id写入DIV*/
    var td_id=0;
    var hangshu=5;// 生成行数
    var td_html="<tr>";
    function create_Div() {
        if(td_id%7==0&&td_id!=hangshu*7&&td_id!=0) {
            td_html+="</tr><tr>"
        }
        td_id++;
        let cars_Ran=carNum_Ran();
        td_html+=`<td><div id="div${td_id}" class="buit_Div">${cars_Ran}</div></td>`;

        if(td_id==hangshu*7) {
            console.log(td_html)
            document.getElementById("table_html").innerHTML=td_html;
        } else {
            create_Div();
        }
    }
    /*点击开始和结束事件*/
    var btn=document.getElementsByTagName("input");
    var tim;

    function start_Chose(btn_value) {
        if(btn_value=="开始") {
            btn[0].value="停止";
            td_id=0;
            // document.getElementById("table_html").innerHTML = "";
            tim=setInterval(suiji, 100);
            // 修改颜色
            for(let a=0;a<document.querySelectorAll(".buit_Div").length;a++) {
                document.querySelectorAll(".buit_Div")[a].classList.remove("active");
            }
        } else {
            btn[0].value="开始";
            clearInterval(tim);
        }
    }

    // 随机生成
    function suiji() {
        // 总共是28个，
        for(let i=0;i<hangshu*7;i++) {
            let cars_Ran=carNum_Ran();
            // 塞入页面
            let str="div"+(i+1);
            document.getElementById(str).innerHTML=cars_Ran;
        }
    }
    // 选中 buit_Div
    let choose_txt="";
    let choose_arr=[];
    document.addEventListener("click", function(e) {
        if(e.target.className=="buit_Div") {
            // 获取点击的区域
            let str=e.target.getAttribute("data-choose");
            if(str!=""&&str!=null) {
                // 点击的是已经选中的3个号码
                // 点击就要移除
                // 询问是否删除
                var isTrue = confirm("是否选中");
                console.log(isTrue);
                if(isTrue) {
                    alert("确认车牌号是："+str+" 请进行下一步操作");
                    // 进行跳转
                    // window.location.href = "index.html";
                }

                // 删除选中的号码，这里无需，只有3次选中的机会，不可删除
                // if(choose_arr.indexOf(str)!=-1) {
                //     choose_arr.splice(choose_arr.indexOf(str), 1);
                // } else {
                //     choose_arr.push(str);
                // }

            } else {
                // 修改颜色
                for(let a=0;a<document.querySelectorAll(".buit_Div").length;a++) {
                    document.querySelectorAll(".buit_Div")[a].classList.remove("active");
                }

                document.querySelector("#"+e.target.id).classList.add("active");
                choose_txt=e.target.innerHTML;
                if(choose_arr.indexOf(choose_txt)!=-1||choose_arr.length>2) {
                    return
                }
                choose_arr.push(choose_txt);



            }
            // 添加到选中区
            let choose_html="";
            for(let i=0;i<choose_arr.length;i++) {
                choose_html+="<td class='buit_Div' data-choose='"+choose_arr[i]+"'>"+choose_arr[i]+"</td>";
            }
            document.getElementById("chooseArray").innerHTML=choose_html;
            document.querySelector("#isOk").classList.remove("hide");
            if(choose_arr.length==3) {
                // 最多选择3个号码
                document.querySelector("#isOk").classList.add("hide");
            }

        }

    });
    function is_ok() {
        alert("您选中的号码为"+choose_txt);
    }
</script>

</html>