JS小练————简易随机点名（含注释）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            margin: 0 auto;
            font-size: 18px;
        }

        .big {
            width: 500px;
            height: 400px;
            border: 1px solid gray;
            text-align: center;
            line-height: 400px;
        }

        .small {
            text-align: center;
            margin-top: 50px;
        }

        button {
            height: 100px;
            width: 140px;
        }
    </style>
</head>

<body>
    <div class="big">点名</div>
    <div class="small"><button>开始</button></div>
    <script>
        let button = document.querySelector("button")
        let div = document.querySelector(".big")
        // 获取元素
        let flag = false
        // 先设一个错
        let arr = ["西施", "马超", "曜", "云中君", "瑶", "猪八戒", "嫦娥", "伽罗", "盾山", "司马懿", "孙策", "元歌", "米莱狄", "狂铁", "弈星", "裴擒虎",
            "杨玉环", "公孙离", "明世隐", "女娲", "梦奇", "苏烈", "百里玄策", "百里守约", "铠", "鬼谷子", "干将莫邪", "东皇太一", "大乔", "黄忠", "诸葛亮",
            "哪吒", "太乙真人", "蔡文姬", "雅典娜", "杨戬", "成吉思汗", "钟馗", "虞姬", "李元芳", "张飞", "刘备", "后羿", "牛魔", "孙悟空", "亚瑟", "橘右京",
            "娜可露露", "不知火舞", "张良", "花木兰", "兰陵王", "王昭君", "韩信", "刘邦", "姜子牙", "露娜", "程咬金", "安琪拉", "貂蝉", "关羽", "老夫子",
            "武则天", "项羽", "达摩", "狄仁杰", "马可波罗", "李白", "宫本武藏", "典韦", "曹操", "甄姬", "夏侯惇", "周瑜", "吕布", "芈月", "白起", "扁鹊",
            "孙膑", "钟无艳", "阿轲", "高渐离", "刘禅", "庄周", "鲁班七号", "孙尚香", "嬴政", "妲己", "墨子", "赵云", "小乔", "廉颇"]
            // 设一个数组
        button.addEventListener("click", function () {
            // 点击事件
            flag=!flag
            // 点击反向
            if (flag) {
                // 若为真
                time1=setInterval(function () {
                    // 定时器
                    div.innerHTML = arr[Math.floor(Math.random() * (arr.length-1)+1)]
                    // 随机数匹配数组
                }, 7)
                this.innerHTML = "停！"
                // 改变按钮
                console.log(flag);
            }
            if(!flag) {
                // 若假
                console.log(111);
                div.innerHTML = arr[Math.floor(Math.random() * 9 + 1)]
                // 当前随机数
                clearInterval(time1)
                // 停止定时器
                this.innerHTML = "开始"
                // 改变按钮
                console.log(flag);
            }
        }
        )
    </script>
</body>

</html>
JS小练————简易随机点名（含注释）

猜你喜欢
