js随机点名器
2018-12-24 11:31
162 查看
今天翻到以前一个js随机点名效果，当时也是头疼了几天才做出来的，代码有些繁琐，不过希望可以帮到你
github地址https://github.com/windows99/dianmingqi.git
浏览地址https://windows99.github.io/dianmingqi/点名器.html
不要像我一样html起中文名字
代码如下
main.js
[code]//获取按钮 点名和重置
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.nextElementSibling.innerHTML;
}
//出现在banner的trtd改变他们的样式
for(var a=0;a<tr.length;a++){
if(banner.innerHTML==tr[a].firstElementChild.innerHTML+' '+trone.firstElementChild.nextElementSibling.innerHTML){
tr[a].getElementsByTagName('td')[1].innerHTML=true;
tr[a].style.color='rgb(200,200,200)';
tr[a].style.background='rgb(100,100,100)';
tr[a].getElementsByTagName('td')[2].firstElementChild.style.background='rgb(200,200,200)';
tr[a].getElementsByTagName('td')[2].firstElementChild.disabled=true;
}
}
run()
}
html
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>209班点名器</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="box"> <h1>W209班</h1> <div class="btn"> <button>点名</button> <input type="button" onclick="javascript:window.location.reload()" value="重置"/> </div> <div class="banner"> 请点击按钮，开始点名 </div> <table cellspacing=0> <thead> <tr> <th>#</th> <th>姓名</th> <th>点名状态</th> <th>设置已点</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>王哲胜</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>2</th> <td>易晓辉</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>3</th> <td>付帅</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>4</th> <td>李宝龙</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>5</th> <td>肖宇</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>6</th> <td>赵鹏飞</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>7</th> <td>赵宏伟</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>8</th> <td>高逸飞</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>9</th> <td>强傲</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>10</th> <td>张佳富</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>11</th> <td>李艳遇</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>12</th> <td>石文利</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>13</th> <td>肖宇</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>14</th> <td>王颖</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>15</th> <td>纪美</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>16</th> <td>于子清</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>17</th> <td>陈元</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>18</th> <td>林天伟</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>19</th> <td>鲁轲</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>20</th> <td>杨朔</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>21</th> <td>闫梓旋</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>22</th> <td>王文丽</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>23</th> <td>付宝宝</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>24</th> <td>梁振</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>25</th> <td>王箭</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>26</th> <td>陶博舒</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>27</th> <td>梁萌</td> <td>false</td> <td><button>设置已点</button></td> </tr> <tr> <th>28</th> <td>王帅康</td> <td>false</td> <td><button>设置已点</button></td> </tr> </tbody> </table> </div> <!--<script src='js/index.js'></script>--> <script src='js/main.js'></script> </body> </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 