Rumah >hujung hadapan web >html tutorial >html座位表随机点名的实例代码
html座位表随机点名的实例代码
- 高洛峰asal
- 2017-03-24 12:01:219296semak imbas
这篇文章详解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>Atas ialah kandungan terperinci html座位表随机点名的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html使用表单标签实现与用户交互代码Artikel seterusnya：css中px与em以及rem的区别总结