前端生成双色球

最新推荐文章于 2023-11-05 20:57:03 发布

前端资深爱好者

最新推荐文章于 2023-11-05 20:57:03 发布

阅读量232

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_48672377/article/details/132326509

版权

用 js 数组生成双色球

<title>双色球</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            display: block;
            margin: 20px auto;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .wp{
            width: 600px;
            margin: 20px auto;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }
        .wp span{
            width: 50px;
            height: 50px;
            background: #f00;
            color: #fff;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
        }
        span:nth-last-child(1){
            background: #00f;
        }
    </style>
</head>
<body>
    <button id="btn">投注</button>
    <div id="wp">
        <div class="wp">
            <span>1</span>
            <span>20</span>
            <span>30</span>
            <span>24</span>
            <span>25</span>
            <span>16</span>
            <span>17</span>
        </div>
    </div>
</body>
</html>
<script>
    let btn = document.getElementById('btn');
    let wp = document.getElementById('wp');
    let s1 = '随便';
    let s2 = '吃饭';
    // s2 = s1 + s2 +'<span>'+s1+'<span>';
    console.log(s2);
    btn.onclick=function(){
        //创建一个空数组，然后给数组添加1-33不重复的6个随机整数
        let arr=[];
        for(let i=0;i<6;i++){
            //生成随机整数[1,33]
            let n = Math.floor(Math.random()*(33-1+1)+1);
            if(arr.indexOf(n)>=0){
                i--;
            }else{
                arr.push(n);
            }
        }
        //随机生成一个[1,16]的随机整数
        let blue = Math.floor(Math.random()*16)+1;
        arr.push(blue);
        console.log(arr);

        // wp.innerHTML='<span>岳</span><span>飞</span>';      
        let str ='<div class="wp">';
        for(let i=0;i<arr.length;i++){
            str+='<span>'+arr[i]+'</span>';
            console.log(i,str);
        }  
        str +='</div>';
        console.log(str);//字符串，具有多个标签的字符串
        wp.innerHTML += str; //把字符串赋值给 wp.innerHTML 属性
    };
</script>