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;
            
        }
  • 相关阅读:
    20100720 14:14 转:BW十日谈之标准数据源
    BW会计年度期间转换出错
    SQL Server 2005 Logon Triggers 详细介绍
    作业输出文档维护
    windows 系统监视器 以及建议阀值
    linkedserver 的使用
    DAC 连接数据库需要做些什么
    SQL Server 2008新特性 Merge 详细见联机手册
    【20110406】提高数据库可用性需要注意的问题
    索引迁移
  • 原文地址:https://www.cnblogs.com/yizhiduxiublog/p/12742621.html
Copyright © 2011-2022 走看看