random
/
index.html

<!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>
        .content {
            width: 400px;
            margin: 100px auto;
            text-align: center;
        }

        #box {
            line-height: 150px;
            font-size: 80px;
        }

        #btn {
            width: 200px;
            height: 80px;
            font-size: 40px;
            border: none;
            color: white;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="content">
        <div id="box">随机点名器</div>
        <button id="btn">开始</button>
    </div>
    <script>
         var namelist = ['李元芳','亚连','赵怀真', '百里守约', '上官婉儿', '庄周', '关羽', '桑启', '莱西奥', '云中君', '武则天', '张良', '妲己', '海月','海诺','刘禅', '蔡文姬', '大乔', '鲁班大师', '马可波罗', '孙尚香', '鲁班', '王昭君', '东皇太一', '夏侯惇', '貂蝉', '米莱迪', '瑶', '孙膑', '李白', '芈                月','狂铁','娜可露露']
        var timer = null
        var num = 0
        function show() {
            //获取页面元素box
            var box = document.getElementById("box")
            box.innerHTML = namelist[num]
            num++
            //从头开始
            if (num == namelist.length) {
                num = 0
            }
            //设置定时器，递归函数
            timer = setTimeout("show()", 100)
        }
        //封装一个函数，用于点击开始与暂停
        function doit() {
            // 通过id获取按钮元素
            var btn = document.getElementById("btn")
            if (timer == null) {
                btn.innerHTML = '停止'
                show()

            } else {
                btn.innerHTML = '开始'
                clearTimeout(timer)
                timer = null

            }

        }
    </script>
</body>

</html>