引言
随机点名器是一个简单有趣的应用程序，常用于课堂或者会议中随机挑选发言者。本文将详细介绍如何使用 HTML 和 JavaScript 来创建这样一个点名器。
效果图
1. HTML 结构
首先，我们需要创建一个网页结构，包括一个用于显示名字的盒子和一个按钮来控制点名的开始和停止。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>随机点名器</title>
<style type="text/css">
/* CSS 样式 */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% "Microsoft YaHei","微软雅黑", "宋体";}
#bodybj{background:url(images.jpg) no-repeat center top;}
#box{margin:auto;width:660px;font-size:66px;height:94px;line-height:94px;overflow:hidden;color:#138eee;text-align:center;padding:0 30px;margin-top:200px;}
#bt{margin:auto;width:200px;text-align:center;margin-top:75px;color:#fff;font-size:25px;line-height:28px;cursor:pointer;}
</style>
<script type="text/javascript">
// JavaScript 代码
var namelist = [
"朱春涛","赵文静","柴启泰","孙鸿苗","赵凯","杜青雨"
];
var mytime = null;
function doit() {
var bt = document.getElementById("bt");
if (mytime === null) {
bt.innerHTML = "停止点名";
show();
} else {
bt.innerHTML = "开始点名";
clearTimeout(mytime);
mytime = null;
}
}
function show() {
var box = document.getElementById("box");
var num = Math.floor(Math.random() * 100000) % namelist.length;
box.innerHTML = namelist[num];
mytime = setTimeout(show, 99);
}
</script>
</head>
<body id="bodybj">
<div id="box">同学们！准备好点名了吗？</div>
<div id="bt" onClick="doit()">开始点名</div>
</body>
</html>2. CSS 样式
为了让网页看起来更加美观，我们为网页添加了一些基本的 CSS 样式。
CSS 代码：
/* CSS 样式 */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% "Microsoft YaHei","微软雅黑", "宋体";}
#bodybj{background:url(images.jpg) no-repeat center top;}
#box{margin:auto;width:660px;font-size:66px;height:94px;line-height:94px;overflow:hidden;color:#138eee;text-align:center;padding:0 30px;margin-top:200px;}
#bt{margin:auto;width:200px;text-align:center;margin-top:75px;color:#fff;font-size:25px;line-height:28px;cursor:pointer;}3. JavaScript 功能实现
接下来，我们来看一下 JavaScript 的部分，这部分代码负责实现点名器的核心功能。
3.1 变量定义
我们首先定义了一个数组 namelist 来存储所有的名字，以及一个变量 mytime 用来保存定时器的引用。
var namelist = [
// 名字列表
];
var mytime = null;3.2 doit() 函数
这个函数用于切换点名状态，即开始点名或停止点名。
function doit() {
var bt = document.getElementById("bt");
if (mytime === null) {
bt.innerHTML = "停止点名";
show();
} else {
bt.innerHTML = "开始点名";
clearTimeout(mytime);
mytime = null;
}
}3.3 show() 函数
这个函数用于显示随机的名字，并且递归调用自身来不断更新显示的名字。
function show() {
var box = document.getElementById("box");
var num = Math.floor(Math.random() * 100000) % namelist.length;
box.innerHTML = namelist[num];
mytime = setTimeout(show, 99); // 每99毫秒更新一次名字
}4. 测试与运行
当页面加载完成后，点击“开始点名”按钮即可启动随机点名器。点名器将以随机的速度显示名单中的名字，再次点击按钮可以停止点名。
5. 总结
通过本文，我们学习了如何使用 HTML 和 JavaScript 创建一个简单的随机点名器。从 HTML 结构的设计到 CSS 样式的美化，再到 JavaScript 功能的实现，每一个步骤都至关重要。希望这篇教程能帮助你理解如何利用前端技术创建实用的小工具。
扩展阅读
- MDN Web 文档 - HTML
- MDN Web 文档 - JavaScript
- MDN Web 文档 - CSS
- W3Schools - JavaScript 教程
- W3Schools - CSS 教程
- W3Schools - HTML 教程
