前端技术-(简易随机点名)

随机点名(简单易上手)

实现此功能的核心思路：

        1、第一步需要给定一个数组，里面存放需要的名字

        2、第二步也是最核心的一步，需要根据数组的长度生成一个随机数

        3、定义一个定时器来实现功能的重复调用，以实现功能

代码实现：

        1、准备一个简单的布局

       css布局 

 * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 100px;
            margin: 0 auto;
            border: 1px solid red;
        }

        button {
            margin: 0 44px;
        }

        #name {
            width: 300px;
            height: 80px;
            margin-top: 10p;
            /* border:1px solid darkcyan; */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        HTML结构

    <div class="box">
        <button id="began">开始点名</button>
        <button id="over">结束点名</button>
        <div id="name">显示区域</div>
    </div>

页面效果

2、JS代码实现功能

        2.1准备数据

let arr = [
            '梦白', '访梦', '蓉诗旋', '尔芙', '迎蓉', '念寒', '翠绿'
            , '独孤败天', '苏柔', '顾', '南宫', '睿渊', '沈意安', '沈星沅', '沈夙鸢', '沈清涵', '沈姝婉',
            , '沈歆然', '沈玉辞', '沈清茉', '沈宴禾',
            '沈枫月', '沈如曦', '沈乔薇', '沈佳雪', '沈微云', '沈喻竹', '沈念', '沈溪年', '沈柚白', '沈念深',
        ]

         2.2实现功能

 // 获取元素节点
        let began = document.querySelector('#began');
        let over = document.querySelector('#over');
        let Name = document.querySelector('#name');
        // 定义一个定时器变量，方便后面开启关闭定时器(null没有实质作用，占个位置)
        let timer = null;
        // 将要实现的功能封装进函数
        function getName(arr) {
            // 生成随机数(最核心的逻辑)
            /*
                这里的随机数需要根据数据的长度来生成
                使用parseInt是为了给生成的随机数取整
            */
            let num = parseInt(Math.random() * arr.length);
            // 获取随机生成的名字(逻辑根据随机生成的num来获取数组的数据)
            let ranomName = arr[num];
            // 显示到页面
            Name.innerHTML = ranomName;
        }
        // 点击开始按钮就执行随机获取名字功能
        began.addEventListener('click', () => {
            // 因为名字要随机获取，所以获取名字的函数要执行多次，就需要定时器
            // 这里注意一个问题，如果连续点击开始按钮。会出现定时器累加的问题，清除的定时器是最后一个定时，前面设置的清除不了
            // 所有在开启定时器之前，需要清除之前的定时器
            clearInterval(timer)
            timer = setInterval(() => {
                getName(arr);
            }, 60)
        });
        // 点击结束按钮停止点名(也就是清除定时器)
        over.addEventListener('click', () => {
            clearInterval(timer)
        })

这就是比较简易的随机点名，只实现的功能。后期的样式美化还没做，仅供参考，有更好的方法或者代码错误的，还望赐教。