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

来源：懂视网责编：小采时间：2020-11-27 15:34:16

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

html座位表随机点名的实例代码:这篇文章详解html座位表随机点名的实例代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点名</title> <style>

推荐度：

点击下载本文 文档为doc格式

导读html座位表随机点名的实例代码:这篇文章详解html座位表随机点名的实例代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点名</title> <style>

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

html座位表随机点名的实例代码:这篇文章详解html座位表随机点名的实例代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点名</title> <style>

推荐度：

点击下载本文 文档为doc格式

标签：代码随机 html

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐