JS -制作随机点名册案例

朴灿烈づ我的快乐病毒、 2023-01-05 05:14 128阅读 0赞

### 点名册效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

### 相关代码： ###

<!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>
            * {
                margin: 0;
                padding: 0;
            }
            
            .name {
                width: 400px;
                height: 200px;
                background-image: linear-gradient(rgb(126, 214, 248), rgb(233, 140, 210), rgb(243, 233, 89));
                box-shadow: 0 0 20px 20px rgb(165, 108, 221);
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -200px;
                margin-top: -100px;
                font-size: 80px;
                letter-spacing: 8px;
                text-align: center;
                line-height: 200px;
                color: #fff;
                animation: ani 1s linear infinite;
            }
            
            @keyframes ani {
                0% {
                    box-shadow: 0 0 20px 20px rgb(165, 108, 221);
                }
                50% {
                    box-shadow: 0 0 20px 5px #e74c3c;
                }
            }
        </style>
        <script>
            window.onload = function() {
                // 声明一个数组存放，名字
                var arr = ["剑圣", "亚索", "提莫", "剑魔", "男枪", "女枪", "寒冰", "复仇之矛", "潘森", "影流之主", "河流之主", "熔岩巨兽", "时间刺客", "盖伦", "皇子", "赵信"]
                    // 获取div标签
                var box = document.getElementsByTagName("div")[0];
                // 清除计时器
                var timer;
                var index;
                // 声明一个布尔值,控制计时器的开关
                var flag = true;
    
                function randoms() {
                    // 获取随机下标
                    index = parseInt(Math.random() * arr.length);
                    // 相应下标在数组中对应的元素写入div标签中
                    box.innerHTML = arr[index];
    
                }
                // 给div标签添加点击事件
                box.onclick = function() {
                    // 启动计时器
                    if (flag) {
                        timer = setInterval(randoms, 50);
                        flag = false;
                    } else {
                        // 清除计时器
                        clearInterval(timer);
                        flag = true;
                    }
    
                }
    
            }
        </script>
    </head>
    
    <body>
        <div class="name">亚索</div>
    </body>
    
    </html>

### 根据以上代码，简单的点名册就完成了，修改名字只需要修改arr数组中的内容就好了！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221119/f8ac16feb9b44404962edc1e526472d2.png