• 原生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;
            
        }
  • 相关阅读:
    package、import、java及javac的相关介绍(转)
    Android开发之大位图二次採样压缩处理(源码分享)
    ubuntu 14.04 使用极点五笔输入法
    HBase概念学习(七)HBase与Mapreduce集成
    JS中setTimeout()的使用方法具体解释
    IntelliJ Idea 经常使用快捷键列表
    公有云与私有云的差别(转)
    jbpm入门样例
    android之PackageManager简单介绍
    WebService究竟是什么?
  • 原文地址:https://www.cnblogs.com/yizhiduxiublog/p/12742621.html
Copyright © 2020-2023  润新知