1. 程式人生 > 其它 >js隨機點名

js隨機點名

技術標籤:前端javascripthtmlhtml5es6

js隨機點名

<!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:nth-child(1) {
            width: 200px;
            height: 100px;
            background-color: burlywood;
            text-align: center;
            line-height: 100px;
        }
        
        div:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div>劉志遠</div>
    <div>開始</div>
    <script>
        var div = document.getElementsByTagName('div');
        var btn = document.getElementsByTagName('button')[0];
        username()

        function username() {
            var flag = false;
            var timerId = null;
            // console.log(div);
            var arr = ['劉志遠', '萬策', '李博文', '曹建瑩', '張佳祺', '趙瑞瑞', '陳全虎', '胡金朋', '耿建麗', '王如雪', '王振濤', '劉放', '張亞迪', '朱翔煜', '王奧', '薛澳飛', '劉志瑋', '胡高洋', '周暢', '趙英傑', '徐亞美', '鄭勇超', '聞吉祥', '王阿雨', '陳德帥', '申林益', '趙豔哲', '肖夢飛', '鮑爾欣', '代星澳', '汪青', '謝森成', '雷呂能', '丁康寧', '楊澤文', '王永傑', '侯振強', '馬建成', '朱保森', '王皓圓', '孫秀婷', '靳丹丹', '李聰', '紀妍', '蘇文璇'];

            div[1].onclick = function() {

                if (flag) {
                    clearInterval(timerId);
                    div[1].innerHTML = '停止'
                    flag = false;
                } else {
                    timerId = setInterval(function() {
                        var re = Math.floor(Math.random() * arr.length);
                        console.log(re);
                        div[0].innerHTML = arr[re];
                    }, 60);
                    div[1].innerHTML = '開始'
                    flag = true;
                }


            }
        }
    </script>
</body>

</html>