乞丐版点名器

最新推荐文章于 2024-08-25 09:57:22 发布

weixin_46668225

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量118

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_46668225/article/details/106934644

版权

名字没有数据源就使用随机生成的汉字作为名字JavaScript代码如下：

<!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>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
    <!-- 引入jquery文件-->
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1 align="center">随机点名器</h1>
    <table id="tb">
        <caption>学生信息表</caption>
        
    </table>
    <div align="center">
        <input type="button" value="开始" id="start" >
        <input type="button" value="结束" id="end" >
    </div>
    
</body>
<script>
    // 生成一个随机汉字
    function getRandomChineseWord () {
    var _rsl = "";
    var _randomUniCode = Math.floor(Math.random() * (40870 - 19968) + 19968).toString(16);
    eval("_rsl=" + '"\\u' + _randomUniCode + '"');
    return _rsl;
    }
    let name=getRandomChineseWord();
  
   
    function randomName(){
        // 生成一个随机数决定名字的长度，长度为2-5
        let ran=Math.random()*100
        // 向下取整变为一个整数
        let intrand=Math.floor(ran); // 产生的随机整数是0-99
        // 对5取余
        let m=intrand%5;
        if(m<2){
            m=m+2;
        }
        //生成随机长度的名字
        let name="";
        for(let i=0;i<m;i++){
        name+= getRandomChineseWord();
    }
        return name;
        
    }

   
   let count=0;
   // 生成40个块级标签
   for(let j=0;j<8;j++){
       // 生成tr标签
       let tr= document.createElement("tr")
       // 生成五个th标签
       for(let i=0;i<5;i++){
           count++;
           let th= document.createElement("th")
           // 设置th标签的id属性
           th.setAttribute("id","th"+count)
           // 把名字添加到th标签中
           th.innerText=randomName()
            // 把th标签添加到tr标签上
            tr.appendChild(th)
       }
       // 把tr标签添加到表上
    let tb=document.getElementById("tb")
    tb.appendChild(tr)
       
   }

   let time;

   function changeColorId(){
 // 获得要设置背景颜色标签的id
       // 生成1-40之间的随机数
       let ran= Math.random()*41
       // 向下取整
       let id= Math.floor(ran)
        let changeId="th"+id;
        return changeId;
   }
   // 点击开始按钮开始定时任务
   document.getElementById("start").onclick=function(){
   // 设置定时任务
   time= window.setInterval(function(){
        // 利用jq属性选择器筛选背景是为红色的元素并移除
        $("th[style='background-color:red']").removeAttr("style")
        // let redTh= $("th[style:background-color :red]")
        let id=changeColorId();
        document.getElementById(id).setAttribute("style","background-color:red")
   },10)

   }
   // jq引入测试
//    $("#start").click(function(){
//        alert("引入成功")
//    })
   // 点击停止结束定时任务
    document.getElementById("end").onclick=function(){
        window.clearInterval(time);
    }
    // 在点击停止以后弹出中奖的名字
    
     $("#end").click(function(){
        let target=  $("th[style='background-color:red']").get(0).innerText
        alert("恭喜"+target+"同学");
     })  
    </script>
</html>

weixin_46668225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
乞丐版点名器

名字没有数据源就使用随机生成的汉字作为名字JavaScript代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt
复制链接

扫一扫