双色球随机数练习

<!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">
    <title>Document</title>
    <style>
    #useballs{
        display: flex;
    }
    span{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        color: white;
        font-weight: bolder;
        margin: 20px;
    }
    .red{
        background: red;
    }
    .blue{
        background: blue;
    }
    
    </style>
</head>
<body>
    <div id="useballs">


    </div>
    <button id="button">随机选</button>  
    <script>
        //生成球的数字
        function makeball(n,min,max) {
            let nums = [];
            for (let i=0;i<n;i++){
                let num = Math.round(Math.random()*(max-min)+min);
                if(nums.indexOf(num) === -1){
                    nums.push(num);
                }else{
                    i--;
                }
            }
            return nums;
        }
        let redballs = makeball(6,1,33);
        let blueballs = makeball(1,1,16);

        function run (arr,classname){
            for(let i=0;i<arr.length;i++){
                useballs.innerHTML+=`<span class="${classname}">${arr[i]}</span>`
            }
        }
        run(redballs,"red");
        run(blueballs,"blue");
        button.onclick=function(){
            location.reload()
        }
    
    </script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/13330893721zhy/p/11434376.html