随机点名DEMO

最新推荐文章于 2024-04-08 14:55:27 发布

嘎啦给给

最新推荐文章于 2024-04-08 14:55:27 发布

阅读量219

点赞数 1

分类专栏： demo 文章标签： javascript

本文链接：https://blog.csdn.net/drug1910951117/article/details/106943847

版权

demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

步骤

只需要将人员名单使用工具处理成下面的字符串并放在<script>标签内第一行即可(见:数据准备)
需要导入jQuery
点击导入人员信息即可看到对应的信息
正常使用(下面有具体实现)

数据准备

//人员名单
let names = "王峻熙,张嘉懿,李煜城,赵懿轩,王烨华,杨煜祺,阎智宸,孙正豪,吴昊然,郭志泽,李明杰,杨弘文,靳烨伟,马苑博,张鹏涛,叶红艳,张天荣,孙志梅,刘雪恩,孙荣";

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #add{
            float: right;
            margin-right: 50px;
        }
        div{
            height: 500px;
            margin: 50px;
        }
        table{
            width: 70%;
            height: 90%;
            margin: auto;
            text-align: center;
        }
        tr{
            border:red 1px solid;
        }
        td{
            border: red 1px solid;
            text-align: center;
            font-size: large;
        }
        span{
            float: left;
        }
        .stopCss{
            margin-left: 20px;
        }
    </style>
</head>
<body bgcolor="#dbdbdc">
    <center><h1>随机点名系统</h1></center>
    <span><button id="add">导入人员信息</button></span>
    <span><button id="start">点名</button></span>
    <span><button id="stop" style="margin-left: 20px;">停止</button></span>
    <!--<span><button id="add">导入人员信息</button></span>-->

    <div id="div">
        <!--存放人员信息div-->
    </div>
    
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//使用数据准备的人员名单
let names = "王峻熙,张嘉懿,李煜城,赵懿轩,王烨华,杨煜祺,阎智宸,孙正豪,吴昊然,郭志泽,李明杰,杨弘文,靳烨伟,马苑博,张鹏涛,叶红艳,张天荣,孙志梅,刘雪恩,孙荣";
//转成数组
let nameArr = names.split(",");

//定义一个变量,相当于处理好的人员名单的索引
var nameIndex = 0;

//根据人数创建表格,行,单元格,并添加人员信息到单元格
let addperson = document.getElementById("add").onclick = function(){
    
    //点击开始添加人员信息时,禁用该按钮
    document.getElementById("add").setAttribute("disabled",true);

    //创建tb
    var tb = document.createElement("table");
    tb.setAttribute("cellPadding","0");
    tb.setAttribute("cellSpacing","0");

    //将tb添加到div中
    var div = document.getElementById("div");
    div.appendChild(tb);

    //实际人数
    var nums = nameArr.length

    //创建tr,固定一行8个td,
    //需要创建的行数
    var createTR = Math.ceil(nums / 8);
    for(let i = 0; i < createTR;i++){
        //创建行
        var tr = document.createElement("tr");
        //将tr添加到tb
        tb.appendChild(tr);
    }

    //获取到所有的tr
    let doneTr = document.getElementsByTagName("tr");
	//在doneTr的遍历中添加td和对应的人员信息
    for(let index = 0;index < doneTr.length;index++){
         //如果是最后一行的话,创建的单元格个数需要判断
         if(index == doneTr.length - 1){
            //最后一列需要创建:nums -  ((createTR - 1) * 8) 个单元格
            var lastTR_TD = nums - ((createTR - 1) * 8);
            //循环创建最后一行的单元格
            for(let lastTD = 0;lastTD < lastTR_TD;lastTD++){
                //创建最后一行的td
                let td = document.createElement("td");
                //添加id属性,属性值为nameIndex
                td.setAttribute("id",nameIndex);
                //添加人员信息到td中
                td.innerHTML = nameArr[nameIndex];
                nameIndex++;
                //将创建的td添加到最后一行
                doneTr[index].appendChild(td);
            }
            
        }else{
            //非最后一行正常创建td并添加内容
            for(let createTD = 0;createTD < 8;createTD++){
                //创建td,固定一行8个td
                    let td = document.createElement("td");
                    td.setAttribute("id",nameIndex);
                    td.innerHTML = nameArr[nameIndex];
                    nameIndex++;
                    doneTr[index].appendChild(td);
            }
        }
    }
}


//定义一个定时器变量,用于随机单元格
var changeTd;

//在定义一个定时器变量,用于取消之前被定时器修改过的单元格颜色
var changeTdAfter;

//定义一个目标td变量
var targetTD;

//定义一个目标td的id属性值变量
var TdId;
//为start绑定单机事件,开始点名
let start = $("#start").click(function(){
		//点击开始按钮后,禁用开始按钮
        $("#start").prop("disabled",true);
    	//定时器每次随机选中一个td,为其添加背景色,间隔50ms
        changeTd = window.setInterval(function(){
       	 	//开始之前清除之前颜色
        	$("td").css("background-color","");
            //定义一个随机数,用于获取到名字所属单元格(随机选中单元格)
            let randomNum = Math.floor((Math.random() * nameArr.length) + 1 );
            //使用定义的目标td变量
            TdId = "#" + randomNum;
            //根据随机获取的数拼接上 # 进行查找指定td
            targetTD = $(TdId);
            //设置td的bgcolor
            targetTD.css("background-color","blue");
        },50);
            //清除td背景颜色
            changeTdAfter = window.setInterval(function(){
            targetTD.css("background-color","#dbdbdc");      
    },49);
});

//为stop绑定单击事件,停止点名
let stop = $("#stop").click(function(){
//点击停止按钮后,取消开始按钮的禁用
    $("#start").prop("disabled",false);
    //取消定时器(停止点名)
    window.clearInterval(changeTd);
    window.clearInterval(changeTdAfter);

    //重新设置随机选中td的bgcolor
    let clearTargetTD = $(TdId).css("background-color","red");;
});
</script>
</html>

有待提升
1.表格边框细节没有处理

嘎啦给给

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机点名DEMO

步骤只需要将人员名单使用工具处理成下面的字符串并放在<script>标签内第一行即可点击导入人员信息即可看到对应的信息正常使用(下面有具体实现)数据准备//人员名单let names = "王峻熙,张嘉懿,李煜城,赵懿轩,王烨华,杨煜祺,阎智宸,孙正豪,吴昊然,郭志泽,李明杰,杨弘文,靳烨伟,马苑博,张鹏涛,叶红艳,张天荣,孙志梅,刘雪恩,孙荣";具体代码<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫