js 实现一个随机 “点名”的效果案例

旧梦星轨

已于 2023-04-02 17:01:58 修改

阅读量1.3k

点赞数 1

分类专栏：代码片段集文章标签： javascript html5 css es6 前端

于 2021-11-10 22:18:47 首次发布

本文链接：https://blog.csdn.net/qq_60961397/article/details/121258164

版权

代码片段集专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>谁是幸运儿</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    /* 名字和图片总显示区域 */
    #box {
        width: 1000px;
        height: 500px;
        line-height: 500px;
        text-align: center;
        margin: auto;
        color: red;
        font-size: 100px;
        display: flex;
        justify-content: space-between;
    }

    /* 右配图 */
    #box>div:nth-child(1) {
        width: 200px;
        height: 500px;
    }

    /* 名字显示区域 */
    #box>div:nth-child(2) {
        width: 400px;
        height: 500px;
        font-size: 55px;
    }

    /* 狗狗图 */
    #box>div:nth-child(3) {
        width: 200px;
        height: 500px;
    }

    /* 整个按钮区域 */
    .buttom {
        width: 1000px;
        height: 200px;
    }

    /* 按钮设置 */
    form {
        display: flex;
        margin: auto;
        align-items: center;
        justify-content: space-around;
        margin-top: 50px;
    }

    /* 开始按钮 */
    .buttom>form>input:nth-child(1) {
        width: 200px;
        height: 100px;
        margin-top: 20px;
        background-color: blanchedalmond;
        font-size: 50px;
        color: royalblue;
        border-radius: 100px;
    }

    /* 刷新按钮 */
    #button {
        width: 200px;
        height: 100px;
        margin-top: 20px;
        background-color: rgb(205, 225, 255);
        font-size: 50px;
        color: rgb(225, 65, 118);
        border-radius: 100px;
    }

    /* 停止按钮 */
    .buttom>form>input:nth-child(3) {
        width: 200px;
        height: 100px;
        margin-top: 20px;
        font-size: 50px;
        border-radius: 100px;
        background-color: aqua;
        color: yellowgreen;
    }

    /* 整个主体 */
    .xaun {
        width: 1000px;
        margin: auto;
        margin-top: 100px;
    }
</style>

<script src="随机函数.js"></script>
<body>
    <div class="xaun">
        <div id="box">
            <div>
                <img src="./1.jpg" alt="" style="width: 200px;height: 300px;margin-top: 50%;">
            </div>
            <div id="Render">准备好了吗?</div>
            <div>
                <img src="./2.gif" alt="" style="width: 200px;height: 500px;">
            </div>
        </div>
        <div class="buttom">
            <form>
                <input type="button" value='开始' id='startBtn'>
                <input type="submit" value="刷新" id="button">
                <input type="button" value='停止' id='stopBtn'>
            </form>
        </div>
    </div>
    <script>
        function Random() {
            let str = '戴拿奥特曼,盖亚奥特曼,阿古茹奥特曼,纳依斯奥特曼,奈欧斯奥特曼,赛文21奥特曼,高斯奥特曼,杰斯提斯奥特曼,雷杰多奥特曼,奈科斯特奥特曼,奈克瑟斯奥特曼,诺亚奥特曼,麦克斯奥特曼,杰诺奥特曼,梦比优斯奥特曼,希卡利奥特曼,赛文X奥特曼,赛罗奥特曼';
            let arr = str.split(",");   //先把str字符串转换成数组
            let puke = "";         //初始值为空
            let number = "";          //储存名字
            let splite = "";          //储存名字对应的下标
            startBtn.onclick = function () {             //获取点击
                if (arr.length != 0) {                  //判断当名字删除完过后，提示刷新名单
                    if (puke) {               //puke为ture的时候
                        return;           //当puke已经有值的之后,停止执行，决绝重复层叠执行
                    } else {
                        puke = setInterval(function () {                   //获取点击后，开始循环执行
                            splite = [randomNum(0, arr.length - 1)];         //把随机的下标传给数组
                            number = arr[splite];                         //拿着对应的下标找到对应的名字，把名字传入到对应数组
                            Render.innerHTML = number;    //把数组的随机下标对应的名字，放到页面标签中
                        }, 50)
                    };
                } else {
                    Render.innerHTML = "请刷新名单";
                }
            };
            stopBtn.onclick = function () {           //点击停止按钮
                if (puke) {                      //判断puke是否正在执行，如果在执行才能停止，没有执行，就不能点击停止
                    clearInterval(puke);                     //点击过后取消时钟执行
                    puke = null;             //点击过后，清空puke的值 
                    arr.splice(splite, 1);            //删除抽到过的名字
                }
            }
        }
        Random();
    </script>
</body>
</html>