html基础 javascript 基础简单实现随机点名系统

最新推荐文章于 2024-03-04 10:21:38 发布

Lp可乐加冰

最新推荐文章于 2024-03-04 10:21:38 发布

阅读量669

点赞数

分类专栏：随机点名系统文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_42478562/article/details/106992248

版权

随机点名系统专栏收录该内容

1 篇文章 0 订阅

订阅专栏

随机点名系统的设计与实现

总体思路

1.创建一个父类表格table元素，给它id值
2.创建开始、停止按钮
3.创建数组，用来存放人名
4.循环遍历，将人名添加到单元格中，再将单元格对象添加到table中
5.创建开始按钮点击事件
6.创建停止按钮点击事件

代码实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    table{
        text-align: center;
    }
    </style>
</head>
<body>
    <h1 >随机点名系统</h1>
    <table id="tb">
        
    </table>

    <!-- 创建点名和停止按钮 -->
    <input type="button" id="btn1" value="点名"/>
    <input type="button" id="btn2" value="停止"/>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    var arr=["肖绍霆","文鑫","向贞好","胥员员","李勇","熊明","杜凯","熊国良","付帅","龚文曦","吴世林","李鹏","宋小明","黄海","曾光鹏","墙世川","幸勇","彭清亮","杨崇鑫","王一舟","汪家鹏","高茂鑫","张松恒","杨海峰","付杨恒","唐浩翔","张攀"];
    let hang=Math.ceil(arr.length/6); 
    let table=document.getElementById("tb");
    //创建行对象
    for(i=0;i<hang;i++){
        let tr=document.createElement("tr");
        table.appendChild(tr);
    }
    
    //创建单元格对象
    let trs=document.getElementsByTagName("tr");
    for(let i=0;i<arr.length;i++){
        let td=document.createElement("td");
        //给单元格添加信息
        td.innerText=arr[i];
        //将单元格添加到行对象中
        if(i<6){
            trs[0].appendChild(td)
        }else if(i>=6&&i<12){
            trs[1].appendChild(td)
        }else if(i>=12&&i<18){
            trs[2].appendChild(td)
        }else if(i>=18&&i<24){
            trs[3].appendChild(td)
        }else if(i>=24&&i<30){
            trs[4].appendChild(td)
        };
    }

        var dm;
        var tz;
    //创建点名按钮函数
    document.getElementById("btn1").οnclick=function(){
        //禁用开始按钮
        $("#btn1").prop("disabled",true);
        //启用停止按钮
        $("#btn2").prop("disabled",false);
        tz=setInterval("colorClear()",300); 
        dm=setInterval("fun()",300);
           
    }
    
     //停止按钮方法
      document.getElementById("btn2").οnclick=function(){
          //清除定时器 
        $("#btn1").prop("disabled",false);
        $("#btn2").prop("disabled",true);
            clearInterval(tz);
            clearInterval(dm);
           
      }

        var num;
    function fun(){
        num=Math.random()*arr.length;
        let num1=Math.floor(num);
        let tds=document.getElementsByTagName("td");
        tds[num1].style.backgroundColor="red";
        
      }

      //    清除颜色方法
      function colorClear(){
        let tds=document.getElementsByTagName("td");
        
            for(let i=0;i<arr.length;i++){
                tds[i].style.backgroundColor="";
            }
      }   
</script>
</html>

Lp可乐加冰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html基础 javascript 基础简单实现随机点名系统

随机点名系统的设计与实现总体思路1.创建一个父类表格table元素，给它id值2.创建开始、停止按钮3.创建数组，用来存放人名4.循环遍历，将人名添加到单元格中，再将单元格对象添加到table中5.创建开始按钮点击事件6.创建停止按钮点击事件代码实现<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
复制链接

扫一扫