js随机点名器

最新推荐文章于 2023-01-14 14:24:32 发布

黑桃爱上红心

最新推荐文章于 2023-01-14 14:24:32 发布

阅读量747

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42669760/article/details/85230950

这篇博客分享了一个用JavaScript编写的随机点名器，作者提到曾为此花费数天时间，虽然代码较为复杂，但希望能对读者有所帮助。点名器的源代码托管在GitHub上，提供了浏览和下载地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天翻到以前一个js随机点名效果，当时也是头疼了几天才做出来的，代码有些繁琐，不过希望可以帮到你

github地址https://github.com/windows99/dianmingqi.git

浏览地址https://windows99.github.io/dianmingqi/点名器.html

不要像我一样html起中文名字

代码如下

main.js

//获取按钮  点名和重置
var btn=document.querySelector('.btn>button');
//获取名字显示的位置
var banner=document.querySelector('.banner');   
//获取所有的tr
var tr=document.querySelectorAll('tbody tr');
//获取所有设置已点的按钮
var btns=document.querySelectorAll('tbody tr td button');

//遍历设置已点的数组
for(var j=0;j<btns.length;j++){
    //点击改变他们的样式
    btns[j].onclick=function(){
        this.parentElement.previousElementSibling.innerHTML=true;
        this.parentElement.parentElement.style.color='rgb(200,20,20)';
        this.parentElement.parentElement.style.background='rgb(100,100,100)';
        this.disabled=true;
        
        run();
    }
}

//这个函数来做tr的随机下标的数组
function run(){
//声明一个随机的数组来做tr的随机下标数组
    var arr=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27];
//为true的让arr对应的下标值为null
    for(var q=0;q<tr.length;q++){
        tr[q].index=q;
        if(tr[q].getElementsByTagName('td')[1].innerHTML=='true'){
            for(var a=0;a<arr.length;a++){
                arr[q]=null;
            }
        }
    }
//新的数组复制上个数组并去掉null
    newArr = arr.filter(function(key) {
        return key !== null
    })
//随机排序一下
    newArr.sort(function(){return Math.random()-0.5;})
    console.log(newArr)
    //返回newArr的值，方便后面使用
    return newArr;
 } 

//i当作下标
var i=0;
btn.onclick=function(){
//接受newArr
    var newArr=run();
    var trone=tr[newArr[i]];
//当前的序号姓名赋值给banner里
        if(i==newArr.length){
            i=null;
            banner.innerHTML='点名完毕'
        }else if(trone.firstElementChild.nextElementSibling.nextElementSibling.innerHTML=='false'){
            banner.innerHTML=trone.firstElementChild.innerHTML+'  '+trone.firstElementChild.nextElementSibling.innerHTML;
        }else if(trone.firstElementChild.nextElementSibling.nextElementSibling.innerHTML=='true'){
            banner.innerHTML=trone.firstElementChild.innerHTML+'  '+trone.firstElementChild.nextEleme