html座位表随机点名的实例代码-html tutorial-php.cn

html座位表随机点名的实例代码

高洛峰

Lepaskan： 2017-03-24 12:01:21

asal

9255 orang telah melayarinya

这篇文章详解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>

Salin selepas log masuk

Atas ialah kandungan terperinci html座位表随机点名的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!