原生JS点名器,随机数

因为工作内容的需要自己琢磨了一个随机数的点名器,很早就写出了一版,今天无意间又看到了之前写的代码,还是有很多bug的,今天做了完善在这里分享给大家

<script type="text/javascript">
    // 声明变量
    var time, // 计时器
        div,
        index,
        state=true,
        name; // 选中的用户名
    div = document.getElementById('name');
    // 创建一个数组用来存储数据
    var name_list1 = 
    ["孙萌",
    "樊鑫",
    "张新艳",
    "王文丽",
    "何玉丹",
    "袁珂珂",
    "王玉婷",
    "杨彩芳",
    "贾晓蕾",
    "孟倩",
    "梁伟廷",
    "刘慧玲",
    "张文轶",
    "吴迎春",
    "姚一凡",
    "刘志朋",
    "刘明慧",
    "马晓娟",
    "牛菲菲",
    "赵慧娴",
    "郭威",
    "王雨莎",
    "郭莹莹",
    "孙美绮",
    "邓捷",
    "任文静",
    "秦鑫",
    "胡玲",
    "马素素",
    "白晓雪",
    "付妍",
    "马霜",
    "雍芳",
    "韩亚迪",
    "王志新",
    "吴昊",
    "孙波",
    "刘京君",
    "刘浩波",
    "冷棚亮",
    "宋依波",
    "李光杰",
    "梁鸿健",
    "王广振",
    "杨维源",
    "王志威"];
    var name_list=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    function start(){
        // 生成一个随机数
        if(name_list.length>0){
            index= Math.floor(Math.random() * name_list.length);
            // 根据随机索引值来确定选中的姓名
            name = name_list[index];
            // 更改网页里div的值
            div.innerHTML = name;
            // Window setTimeout() 方法
            time = setTimeout("start()",50);
        }else{
            div.innerHTML = "没人了";
        }
    }
    function end() {
        clearTimeout(time);
        name_list.splice(index, 1);
        console.log(name_list);
        if (name_list.length == 0) {
            alert("没有了。");
            return;
        }
    }

</script>

HTML层


<div id="name">
        开始点名
</div>

<
div class="b2"> <button onclick="start()">开始</button> <button onclick="end()">结束</button> </div>

css层可自行调节

*{
        margin:0;
        padding:0;
    }

    body {
        
        background-image: linear-gradient(60deg, #f46464 0%, #9c9ee5 100%);
    }

    #name {
        width: 300px;
        height: 300px;
        background:#fff;
        border:1px solid green;
        border-radius:10px;
        margin:50px auto;
        font-size: 50px;
        text-align:center;
        line-height:300px;
    }

    .b2 {
        width: 122px;
        margin: auto;
    }

    button {
        height:50px;
        width:50px;
        
    }

 

posted @ 2020-02-21 10:00  一智独秀  阅读(246)  评论(0编辑  收藏  举报