【HTML基础】随机点名系统（完整源码分享）

话费先生

已于 2025-02-16 14:40:02 修改

阅读量1.7k

点赞数 11

分类专栏：笔记文章标签： html 前端

于 2025-02-16 14:39:43 首次发布

本文链接：https://blog.csdn.net/jyjyjy22/article/details/145664391

版权

【HTML基础】随机点名系统（完整源码分享）

只是为了简单记录一下学习成果，有需要的拿去！

运行效果截图
在这里插入图片描述

运行效果视频

随机点名系统演示

使用方法

在电脑上新建一个文本文件（.txt）
将完整的代码复制到该文本文件保存并退出
将后缀名.txt修改为.html
用电脑浏览器打开即可运行

嫌麻烦可以点这里直接下载.html文件
提取码：snoR

注意事项

1、电脑文件扩展名不显示？

如果看不到文件扩展名请先勾选文件扩展名
勾选文件扩展名操作
2、自定义姓名列表

找到源代码中的names数组，将其内容按照指定格式修改即可
自定义姓名列表操作
3、随机时间太快？

修改以下数值即可，第一个数值是界面每次切换的时间，第二个数值是多少秒出结果
程序时间修改操作

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名系统</title>
    <style>
        :root {
     
            --main-color: #13c13c;
            --button-disabled-color: #ccc;
            --page-standard-distance: 35px;
        }

        * {
     
            margin: 0;
            padding: 0;
        }

        body {
     
            background-color: #d8ffe4;
        }

        .main {
     
            user-select: none;
            /* 去掉行内块元素导致的间隙 */
            word-spacing: -5px;
        }

        .main .title {
     
            text-align: center;
            padding: var(--page-standard-distance) 0;
        }

        .main .grids {
     
            text-align: center;
        }

        .main .grids .grid {
     
            background-color: #555;
            height: 100px;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 24px;
            padding