JS定时器做随机点人案例

Myth丶恋晨 2022-12-09 04:52 129阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div { 
                color: white;
                background-color: yellow;
                text-align: center;
                font-size: 30px;
            }
    
            body { 
                background-color: #000000;
            }
    
            .people { 
                text-align: center;
                color: blue;
                font-size: 40px;
                margin-top: 207px;
            }
        </style>
    </head>
    
    <body>
        <div class="div">随机抽取一名天选之子</div>
        <p class="people">123</p>
        <script>
            var people = document.querySelector(".people");
            var div1 = document.querySelector(".div");
            var name = ""//括号里面是要点的人
            var namelist = name.split(",");
            var num = 0;
            var namecolor = ["yellow", "pink", "red"];
            var flag = true;
            var index = 0;
            var times=null;
            console.log(namelist);
            var colorName = setInterval(function () { 
                var getColorindex = getRandom(0, namecolor.length - 1);
                var getColor = namecolor[getColorindex];
                people.style.color = getColor;
            }, 100);
            div1.addEventListener("click", function () { 
                    if (flag){ 
                    flag=false;
                     times = setInterval(function(){ 
                    var getNameindex = getRandom(0, namelist.length - 1);
                    index = getNameindex;
                    var getName = namelist[getNameindex];
                    name1 = getName;
                    people.innerHTML = getName;
                    }, 100);
                }else{ 
                    flag=true;
                    clearInterval(times);
                }
            });
            function getRandom(min, max) { 
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        </script>
    </body>
    
    </html>