欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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座位表随机点名的实例代码的详细内容,更多请关注其它相关文章!

相关标签: html