使用 HTML 和 JavaScript 实现随机点名器

引言

随机点名器是一个简单有趣的应用程序，常用于课堂或者会议中随机挑选发言者。本文将详细介绍如何使用 HTML 和 JavaScript 来创建这样一个点名器。

效果图

1. HTML 结构

首先，我们需要创建一个网页结构，包括一个用于显示名字的盒子和一个按钮来控制点名的开始和停止。

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 复制代码

/* 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 用来保存定时器的引用。

javascript 复制代码

var namelist = [
    // 名字列表
];
var mytime = null;

3.2 doit() 函数

这个函数用于切换点名状态，即开始点名或停止点名。

javascript 复制代码

function doit() {
    var bt = document.getElementById("bt");
    if (mytime === null) {
        bt.innerHTML = "停止点名";
        show();
    } else {
        bt.innerHTML = "开始点名";
        clearTimeout(mytime);
        mytime = null;
    }
}

3.3 show() 函数

这个函数用于显示随机的名字，并且递归调用自身来不断更新显示的名字。

javascript 复制代码

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 功能的实现，每一个步骤都至关重要。希望这篇教程能帮助你理解如何利用前端技术创建实用的小工具。

使用 HTML 和 JavaScript 实现随机点名器

引言

效果图

1. HTML 结构

2. CSS 样式

3. JavaScript 功能实现

3.1 变量定义

3.2 doit() 函数

3.3 show() 函数

4. 测试与运行

5. 总结

扩展阅读