html座位表随机点名的实例代码
程序员文章站
2022-04-14 17:14:39
...
这篇文章详解html座位表随机点名的实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点名</title> <style> td { width: 9.09%; height: 50px; text-align: center; } .tdBg { background-color: pink; } </style> <script> var timer = null; // 这是一个函数,表示一个功能 function start(){ timer = setInterval(function(){ // alert("要开始了!"); // console.log("???"); // 1.找到所有的 单元格 var allTd = document.getElementsByTagName("td"); // 3.获取一个随机数 // Math.random() 获取一个0-1的小数 // Math.random()*42 获取0-42中间的小数 // parseInt()把一个数字变成整数,例:parseInt(55.99999) ====== 55 var num = parseInt(Math.random()*42); // 2.遍历所有单元格,将所有单元格加上背景颜色 for (var i=0; i<allTd.length; i++) { // 如果(xxxxx) { // 1 // } 否则 { // 2 // } if (i == num) { allTd[i].className = "tdBg"; } else { allTd[i].className = ""; } } }, 1); } function end(){ clearInterval(timer); } </script> </head> <body> <!-- table是表格标签,tr表示一行,td表示一行中的一个单元格 --> <!-- 默认情况,单元格会根据内容的长度比例来自动设置 --> <table border="1" width="1000"> <tr> <!-- 可以对单元格施加宽度属性,使用百分比和长度皆可 --> <td></td> <td></td> <td></td> <td></td> <td></td> <td rowspan="4">走<br>廊</td> <td>钱华</td> <td>康娜娜</td> <td>黄奕渊</td> <td>马庆元</td> <td></td> </tr> <tr> <td>刘杰</td> <td>魏培芳</td> <td>程鹏</td> <td>王可可</td> <td>曹敬</td> <td>朱明洋</td> <td>毛岗</td> <td>王博</td> <td>张国庆</td> <td>潘世豪</td> </tr> <tr> <td>黄倩倩</td> <td>张凯</td> <td>张坤</td> <td>唐东权</td> <td>范东东</td> <td>夏思泽</td> <td>于号山</td> <td>熊仁龙</td> <td>夏利敏</td> <td>史一良</td> </tr> <tr> <td></td> <td>陈兰</td> <td>刘攀登</td> <td>袁翔</td> <td>李鑫</td> <td></td> <td>谢华强</td> <td>焦浩</td> <td>李亚丹</td> <td>韩婷婷</td> </tr> <tr> <!-- colspan 可以跨列 --> <td colspan="11">Poppei</td> </tr> </table> <br><br> <input type="button" value="开始" onclick="start()"> <input type="button" value="结束" onclick="end()"> </body> </html>
以上就是html座位表随机点名的实例代码的详细内容,更多请关注其它相关文章!
上一篇: canvas实例3-在线画图工具