百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

课堂点名总尴尬?试试 DeepSeek，或能实现点名自由!(附教程)

ztj100 2025-07-09 18:38 4 浏览 0 评论

2025 年 2 月 26 日
" 你有没有经历过这样的场景？老师拿着花名册扫视全班：' 今天我们来点名...'
那一刻心跳加速，默念：' 别点我！'
但现在，我要告诉你：我用 DeepSeek 实现了课堂点名自由！"

这个点名神器有多炸裂？

  • 卡通风格界面：学生直呼 "太可爱了！"
  • 随机滚动特效：点击开始后姓名飞速滚动，心跳指数
  • 智能高亮显示：暂停时自动高亮选中者，仪式感 MAX
  • 速度无极调节：滑轮控制 0.1x - 10x 变速，掌控课堂节奏

四步打造点名神器（附完整代码）

第一步：唤醒 DeepSeek

 https://www.deepseek.com 
如果官网比较卡的话，现在有很多的平替平台，火山、百度、搜狗、360、腾讯等
都接入了deepseekR1满血版的大模型

第二步：输入魔法指令

" 帮我写课堂随机点名网页，要求：

帮我写一个课堂随机点名网页，要求如下：

网页背景为卡通风格，标题为“随机抽签”。

中间区域显示滚动的姓名，底部有“开始点名”按钮。

点击按钮开始滚动，再次点击暂停并高亮显示选中姓名。

提供一个滑轮控件，可以控制滚动速度。’

第三步：获取 AI 生成代码

<!DOCTYPE html>
<html>
<head>
    <title>随机抽签</title>
    <style>
        body {
            /* 卡通背景 */
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Comic Sans MS', cursive;
        }

        h1 {
            color: #ff6b6b;
            margin: 20px 0;
        }

        .container {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
            border: 3px solid #4ecdc4;
            border-radius: 15px;
            background: white;
        }

        #names {
            position: absolute;
            transition: transform 0.1s; /* 平滑移动 */
            width: 100%;
        }

        .name {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #2d3436;
        }

        .highlight {
            color: #ff6b6b;
            font-weight: bold;
            font-size: 36px;
        }

        .controls {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        #speed {
            width: 200px;
        }

        button {
            padding: 10px 20px;
            font-size: 18px;
            background: #4ecdc4;
            border: none;
            border-radius: 25px;
            color: white;
            cursor: pointer;
            transition: transform 0.2s;
        }

        button:hover {
            transform: scale(1.1);
            background: #45b7af;
        }
    </style>
</head>
<body>
    <h1>随机抽签</h1>
    <div class="container">
        <div id="names"></div>
    </div>
    <div class="controls">
        <input type="range" id="speed" min="1" max="10" value="5">
        <button id="startBtn">开始点名</button>
    </div>

    <script>
        const names = ['张三', '李四', '王五', '赵六', '小明', '小红', '小刚', '小芳', '陈七', '周八','张四', '李五', '王七', '赵八', '李小明', '李小红', '要小刚', '小大芳', '陈九', '周一'];
        const namesElement = document.getElementById('names');
        const speedSlider = document.getElementById('speed');
        const startBtn = document.getElementById('startBtn');
        let isRolling = false;
        let translateY = 0;
        let animationFrameId = null;
        const itemHeight = 40; // 每个姓名元素的高度

        // 初始化姓
        function initNames() {
            namesElement.innerHTML = '';
            // 复制姓名数组多次以形成循环效果
            for (let i = 0; i < 5; i++) { // 复制5次，足够长
                names.forEach(name => {
                    const div = document.createElement('div');
                    div.className = 'name';
                    div.textContent = name;
                    namesElement.appendChild(div);
                });
            }
        }
        initNames();

        function roll() {
            if (!isRolling) return;

            // 根据速度调整移动距离
            const speed = parseInt(speedSlider.value);
            translateY += speed;

            // 如果超过总高度，重置以实现循环
            const totalHeight = names.length * itemHeight;
            if (translateY >= totalHeight) {
                translateY -= totalHeight;
            }

            namesElement.style.transform = `translateY(-${translateY}px)`;

            animationFrameId = requestAnimationFrame(roll);
        }

        startBtn.addEventListener('click', () => {
            if (!isRolling) {
                isRolling = true;
                startBtn.textContent = '暂停点名';
                // 移除之前的高亮
                document.querySelectorAll('.name').forEach(name => {
                    name.classList.remove('highlight');
                });
                roll();
            } else {
                isRolling = false;
                startBtn.textContent = '开始点名';
                cancelAnimationFrame(animationFrameId);

                // 计算选中的姓名
                const totalHeight = names.length * itemHeight;
                const virtualTranslateY = translateY % totalHeight;
                const selectedIndex = Math.floor(virtualTranslateY / itemHeight);
                const selectedName = names[selectedIndex];

                // 找到所有对应的元素并高亮
                document.querySelectorAll('.name').forEach((nameEl, index) => {
                    const actualIndex = index % names.length;
                    if (actualIndex === selectedIndex) {
                        nameEl.classList.add('highlight');
                    }
                });
            }
        });

        // 初始速度显示
        speedSlider.addEventListener('input', (e) => {
            // 可以实时调整速度，但当前实现中，速度在roll函数里每一帧读取，所以不用做特别处理
        });
    </script>
</body>
</html>


第四步：个性化定制

  1. 替换names数组为你班的真实姓名



  1. 修改 CSS 中的background更换主题色
  2. 可以给出更多的指令，让AI帮你再修改完善，（比如：同时选出2个人），更多更高级的功能等你解锁哦！

三大创新教学场景

  1. 课前预热：用 "幸运儿讲题" 开启课堂
  2. 随堂测验：随机抽选答题勇士
  3. 小组竞赛：动态组队激发团队精神

高频问题解答

  • Q：会重复抽到同一人吗？
    A：完全随机算法，建议抽中后临时移出名单
  • Q：手机端能用吗？
    A：响应式设计，完美适配所有设备
  • Q：数据会保存吗？
    A：纯前端实现，零数据追踪更安全

互动时间：
你遇到过最尴尬的点名场景是？
在评论区分享你的故事！

关注【秋枫红叶】，获取更多 AI 教学黑科技！

相关推荐

前端案例·程序员的浪漫:流星雨背景

如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！（1）方式1：简单版本【1】先看实现效果...

UI样式iPod classic的HTML本地音乐播放器框架

PS：音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...

JavaScript 强制回流问题及优化方案

JavaScript代码在运行过程中可能会强制触发浏览器的回流（Reflow）...

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

最近Ai火的同时，Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor，使用免费版本搞一个零基础教程...

19年前司机被沉尸水库!凶手落网，竟已是身家千万的大老板

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

全民健身网络热度调查“居家健身”成为第一网络热词

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

取代JavaScript库的10个现代Web API及详细实施代码

为什么浏览器内置的API你还在用某个臃肿的Javascript库呢？用内置的API有什么好处呢？Web平台经历了巨大演进，引入了强大的原生API，不再需要臃肿的JavaScript库。现代浏览器现已支...

前端文件下载的N种姿势:从简单到高级

文件下载是web开发里一个非常常见的功能，无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求，每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...

JavaScript 性能优化方法（js前端性能优化）

JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流，影响性能。使用文档片段（DocumentFragment）或虚拟DOM技术减少直接操作。...

DOM节点的创建、插入、删除、查找、替换

在前端开发中，js与html联系最紧密的莫过于对DOM的操作了，本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...

前端里的拖拖拽拽（拖拽式前端框架）

最近在项目中使用了react-dnd，一个基于HTML5的拖拽库，“拖拽能力”丰富了前端的交互方式，基于拖拽能力，会扩展各种各样的拖拽反馈效果，因此有必要学习了解，最好的学习方式就是实操！...

大模型实战:Flask+H5三件套实现大模型基础聊天界面

本文使用Flask和H5三件套（HTML+JS+CSS）实现大模型聊天应用的基本方式话不多说，先贴上实现效果：流式输出：思考输出：聊天界面模型设置：模型设置会话切换：前言大模型的聊天应用从功能...

SSE前端（sse前端数据）

<!DOCTYPEhtml><htmllang="zh-CN"><head>...

课堂点名总尴尬?试试 DeepSeek，或能实现点名自由!(附教程)

2025年2月26日"你有没有经历过这样的场景？老师拿着花名册扫视全班：'今天我们来点名...'那一刻心跳加速，默念：'别点我！'但现在，我要...

我会在每个项目中复制这10个JS代码片段

你是否也有这种感觉：在搭建新项目时，你会想："这个函数我是不是已经写过了...在某个地方？"是的——我也是。所以在开发了数十个React、Node和全栈应用后，我不再重复造轮子。我创建...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.