最近AI技术火爆全国，教师群体的教学方式也在悄然发生改变。可现实却是，许多老师面对数字化工具时仍存在“技术焦虑”——不会编程、不会网页设计、怕操作复杂、担心出错。这些问题让很多人望而却步。其实，技术不是门槛，只是工具做为教师我们更应该快快学习把它做为已用。今天我们要分享的AI点名网页系统，就是一个“0代码门槛，人人可上手”的教学利器，让每位老师都能轻松享受科技带来的便利。

​先让我们看看成品效果图：

废话不多说直接开始教程

让ai生成点名系统网页的​提示词：

使用html帮我做一个 课堂随机点名的网页包含完整代码。要求网页背景是可爱风格。顶部显示“张老师随机点名抽问”大标题，中间区域用来显示滚动的姓名，名字要明显，底部有「开始点名」按钮。点击按钮则开始快速随机滚动姓名，姓名列表我放在后面了。再次点击按钮则暂停此时的名字被选中，然后突出显示被选中的姓名。还有一个滑轮控件可以控制滚动的速度。页面要精美正式注意布局和整体风格搭配。学生姓名如下：林轩
苏瑾
陆然
唐映雪
许辰川
江慕白
杜清扬
秦子墨
叶昭南
温采薇​

复制上面提示词​，粘贴发送给ai大模型，我这里使用的是镜像版的o3mini-high模型，不同模型实际效果可能会有一些差异，大家可以根据运行后的效果做再让ai​继续改。

然后得到ai​生成的html代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>课堂随机点名</title>
  <style>
    /* 整体页面样式 */
    body {
      background: #ffe4e1;
      font-family: "Comic Sans MS", cursive, sans-serif;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    #container {
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      background: #fff;
      border-radius: 10px;
    }
    h1 {
      color: #ff69b4;
      font-size: 2.5em;
      margin-bottom: 20px;
    }
    /* 姓名显示区域 */
    #name-display {
      border: 2px dashed #ff69b4;
      border-radius: 10px;
      background-color: #fff0f5;
      padding: 40px;
      font-size: 3em;
      font-weight: bold;
      margin-bottom: 20px;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }
    /* 控制区：滑块与按钮 */
    #controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    #speedSlider {
      width: 200px;
    }
    button {
      padding: 10px 20px;
      font-size: 1.2em;
      background-color: #ff69b4;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #ff85b8;
    }
    /* 突出显示选中姓名 */
    .selected {
      color: red;
      animation: highlight 1s infinite;
    }
    @keyframes highlight {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
</style>
</head>
<body>
  <div id="container">
    <!-- 顶部大标题 -->
    <h1>张老师随机点名抽问</h1>
    <!-- 中间显示滚动姓名的区域 -->
    <div id="name-display">点击开始</div>
    <!-- 底部控制区：速度滑块 & 点名按钮 -->
    <div id="controls">
      <label for="speedSlider">滚动速度：</label>
      <input type="range" id="speedSlider" min="50" max="500" value="100">
      <button id="toggleButton">开始点名</button>
    </div>
  </div>
  <script>
    // 学生姓名列表
    const names = [
      "林轩",
      "苏瑾",
      "陆然",
      "唐映雪",
      "许辰川",
      "江慕白",
      "杜清扬",
      "秦子墨",
      "叶昭南",
      "温采薇"
    ];
​
    let interval = null; // 定时器ID
​
    // 开始滚动姓名
    function startRolling() {
      const speed = document.getElementById("speedSlider").value;
      interval = setInterval(() => {
        const randomIndex = Math.floor(Math.random() * names.length);
        document.getElementById("name-display").innerText = names[randomIndex];
      }, speed);
      document.getElementById("toggleButton").innerText = "暂停";
    }
​
    // 停止滚动，突出显示当前姓名
    function stopRolling() {
      clearInterval(interval);
      interval = null;
      document.getElementById("toggleButton").innerText = "开始点名";
      // 增加样式突出显示
      document.getElementById("name-display").classList.add("selected");
    }
​
    // 点击按钮控制开始/暂停
    document.getElementById("toggleButton").addEventListener("click", () => {
      if (interval) {
        stopRolling();
      } else {
        // 如果上次选中后有突出显示，则先移除
        document.getElementById("name-display").classList.remove("selected");
        startRolling();
      }
    });
​
    // 滑块控制滚动速度：在滚动过程中实时更新速度
    document.getElementById("speedSlider").addEventListener("input", () => {
      if (interval) {
        clearInterval(interval);
        startRolling();
      }
    });
</script>
</body>
</html>

我们复制ai生成的html代码，然后在电脑上新建一个txt文本文件，把这个html代码粘贴进去保存，接着再把这个txt文件后缀名字改为html保存，双击就可以浏览器打开了​。运行就能得到成品图的效果​。

运行html代码这一步很多人不会，这里又做了一个在线运行器，只需要粘贴要运行的html代码进去点击运行就可以了​。

地址：https://code.dk82.com

# 人工智能
Logo
智能体开发者社区

中国智能体开发者社区，聚焦智能体与大模型开发，提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动，促进经验交流与协作，助力开发者快速构建创新智能应用。

更多推荐

cover

“外国版”workbuddy被开源了！冲上了12k star

avatar 智能体开发者社区
cover

【爱马仕】Hermes 桌面 AI 助手安装详解，新手零难度落地教程

avatar 智能体开发者社区

AI Agent 从 Demo 到生产：6 大支柱让故障率从 37% 降到 0.3%

本文记录了将一个客服 AI Agent 从 Demo 阶段推进到日均 8 万次调用的生产系统的全过程。围绕 Agent 生产化的六大支柱——基础设施、可观测性、护栏、评估、成本优化、应急响应——系统拆解了每个环节的坑位、根因和解决方案。核心数据：故障率从上线初期的 37% 降至 0.3%，P99 延迟从 12s 降至 1.8s，单次调用成本从 0.12 元降至 0.015 元。全文包含 7 段完整

avatar 智能体开发者社区