Heim >Web-Frontend >HTML-Tutorial >Beispielcode für einen zufälligen Appell im HTML-Sitzplan

Beispielcode für einen zufälligen Appell im HTML-Sitzplan

高洛峰
高洛峰Original
2017-03-24 12:01:219295Durchsuche

In diesem Artikel wird der Beispielcode für einen zufälligen Appell im HTML-Sitzplan ausführlich erläutert

<!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>

Das obige ist der detaillierte Inhalt vonBeispielcode für einen zufälligen Appell im HTML-Sitzplan. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn