zoukankan      html  css  js  c++  java
  • 原生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;
            
        }
  • 相关阅读:
    一行代码搞定Dubbo接口调用
    测试周期内测试进度报告规范
    jq 一个强悍的json格式化查看工具
    浅析Docker容器的应用场景
    HDU 4432 Sum of divisors (水题,进制转换)
    HDU 4431 Mahjong (DFS,暴力枚举,剪枝)
    CodeForces 589B Layer Cake (暴力)
    CodeForces 589J Cleaner Robot (DFS,或BFS)
    CodeForces 589I Lottery (暴力,水题)
    CodeForces 589D Boulevard (数学,相遇)
  • 原文地址:https://www.cnblogs.com/yizhiduxiublog/p/12742621.html
Copyright © 2011-2022 走看看