百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

用deepseek设计制作随机点名(不重复抽取图片)程序

yuyutoo 2025-05-25 16:22 4 浏览 0 评论

用deepseek设计制作随机点名（不重复抽取图片）程序

给老师们送福利了，下面是关于用#deepseek#来设计制作#随机点名#随机抽取学生照片的程序。照着我的方法做或直接复制我的代码，你就可以用上随机点名程序了。

一、程序特色：

这段程序与别人家不同的是：

1.随机显示学生照片（不是姓名），抽取更有趣味。

2.对抽中学生可以进行评分（点击照片可加上五角星），教学中更有激励作用。

3.抽取时有背景音乐。

4.学生抽取不重复。

5.抽中学生照片依次排列。

如下图所示：

使用效果请观看我演示的视频。抖音或今日头条搜索：#新技术传播者#。

二、制作方法：

在deepseek对话框中输入如下指令：

用deepseek设计制作一个HTML格式的随机点名程序，要求如下：

背景：使用一张相框图片；

功能：设置两个按钮，一个是“随机点名”，点击后学生的照片随机显示，另一个是“停止”，点击后停止，随机抽取1个学生的照片，显示在画面下方“抽取记录”中间。随机抽取时，配有紧张的背景音乐。抽取到的照片依次显示在屏幕下方中央。随机抽取时不重复抽中。对抽中的照片增加点赞功能（点击照片显示五角星，最多5个）。

学生的照片分别用：图片1.jpg,图片2.jpg,图片3.jpg,图片N.jpg建立文件名。

给Deepseek发出指令后，会生成代码，将代码保存为html格式就可以使用了。

当然，生成的代码可能并不完全符合你的要求，下面给大家一段完整的代码。

三、完整代码：

完整代码使用方法：

复制下方代码，粘贴到“记事本”中，另存为：随机点名.html，保存好后，双击“随机点名.html”在浏览器中打开就可以使用了。按键盘上F11功能键，可以全屏显示。

<!DOCTYPE html>
<html>
<head>
    <title>课堂随机点名不重复</title>
    <style>
        /* 居中容器 - 用于包裹主内容和操作按钮 */
        .container {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%); /* 精确居中定位 */
            text-align: center;
            display: flex;
            flex-direction: column; /* 垂直排列子元素 */
            align-items: center;
        }

        /* 主显示区域照片样式：固定宽度300px高度400px */
        #main-photo {
            width: 300px;  /* 固定宽度 */
            height: 400px;  /* 固定高度 */
            border: 5px solid goldenrod; /* 金色边框 */
            margin-bottom: 30px; /* 与下方按钮的间距 */
        }

        /* 控制按钮容器布局 */
        .controls {
            display: flex;  /* 弹性布局排列按钮 */
            gap: 20px;      /* 按钮间距 */
        }

        /* 按钮基础样式 */
        button {
            padding: 15px 30px;
            font-size: 20px;
            margin: 0 10px;
            cursor: pointer;
            background-color: #4CAF50; /* 主题绿色 */
            color: white;
            border: none;
            border-radius: 5px;
            transition: all 0.2s ease-in-out; /* 过渡动画 */
            transform: scale(1); 
        }

        /* 按钮点击动效 */
        button:active {
            transform: scale(0.95);          /* 点击缩放 */
            background-color: #45a049;       /* 颜色加深 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2) inset; /* 内阴影 */
        }

        /* 按钮悬停效果 */
        button:hover {
            background-color: #66bb6a;       /* 颜色变亮 */
            transform: translateY(-2px);     /* 上移效果 */
            box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 投影增强 */
        }

        /* 页面基础样式:背景图片名为：相框.jpg */
        body {
            background-image: url('相框.jpg');
            background-size: cover;         /* 背景图自适应 */
            background-position: center;
            height: 100vh;                  /* 全屏高度 */
            margin: 0;
            position: relative;
            min-height: 100vh;
            display: flex;
            justify-content: center;        /* 水平居中 */
            align-items: center;            /* 垂直居中 */
        }

        /* 抽中记录样式 */
        #history {
            position: fixed;
            bottom: 20px;
            left: 200px;                    /* 左侧留白 */
            right: 200px;                   /* 右侧留白 */
            background: rgba(255, 255, 255, 0.9); /* 半透明白底 */
            padding: 15px;
            text-align: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* 顶部阴影 */
            height: 200px;                  /* 固定高度 */
            width: 1500px;                  /* 固定宽度 */
            overflow-x: auto;               /* 横向滚动 */
            overflow-y: hidden;            /* 隐藏纵向滚动条 */
            white-space: nowrap;            /* 禁止换行 */
        }

        /* 抽中记录标题样式 */
        #history h3 {
            margin: 0 0 10px 0;
            color: #2196F3;                 /* 蓝色标题 */
            font-size: 18px;
            font-weight: bold; 
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 文字阴影 */
        }

        /* 星星闪烁动画 */
        @keyframes blink {
            0% { opacity: 0.2; transform: scale(0.5); }
            50% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 0.8; transform: scale(1); }
        }

        /* 星星容器样式 */
        .star-container {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);    /* 水平居中 */
            background: rgba(0,0,0,0.6);   /* 半透明黑底 */
            padding: 2px 5px;
            border-radius: 10px;
            display: flex;                 /* 弹性布局排列星星 */
            gap: 2px;                      /* 星星间距 */
            pointer-events: none;          /* 禁止交互穿透 */
        }

        /* 单个星星样式：在照片上显示评价星星 */
        .star {
            color: gold;                   /* 金色星星 */
            font-size: 14px;
            text-shadow: 0 0 5px rgba(255,215,0,0.5); /* 发光效果 */
            animation: blink 0.5s ease-in-out; /* 应用闪烁动画 */
        }

        /* 抽中记录照片样式：固定宽度120px高度160px */
        .history-photo {
            position: relative;            /* 为绝对定位子元素提供基准 */
            width: 120px;                  /* 缩略图宽度 */
            height: 160px;                 /* 缩略图高度 */
            object-fit: cover;             /* 图片自适应裁剪 */
            margin: 0 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            cursor: pointer;               /* 手型指针 */
            transition: all 0.3s ease;    /* 悬停动画过渡 */
        }

        /* 历史照片悬停效果 */
        .history-photo:hover {
            transform: scale(1.1);         /* 悬停放大1.1倍 */
        }
    </style>
</head>
<body>
    <!-- 主内容容器：默认显示:图片1.jpg -->
    <div class="container">
        <img id="main-photo" src="图片1.jpg">
        <!-- 操作按钮组 -->
        <div class="controls">
            <button onclick="startRandom()">抽取</button>
            <button onclick="stopRandom()">停止</button>
        </div>

    </div>

    <!-- 抽中历史记录区域 -->
    <div id="history">
        <h3>抽中记录：</h3>
    </div>

    <!-- 背景音乐元素 背景音乐的文件名为：tension.mp3-->
    <audio id="bgm" src="tension.mp3"></audio>

    <script>
        // 初始化数据
        const N = 8; // 假设图片总数 N=8（可根据实际情况修改）
				const photos = Array.from({ length: N }, (_, index) => `图片${index + 1}.jpg`);//根据设置的图片数量自动生成图片文件名，如：图片1.jpg/图片10.jpg
       
        let availablePhotos = [...photos]; // 创建可抽取副本
        let intervalId; // 存储定时器ID
        const bgm = document.getElementById('bgm'); // 音频控制对象

        // 开始随机切换，每张图片不重复抽取，如全部抽中，则显示：所有学生已抽完
        function startRandom() {
        	  if(availablePhotos.length === 0) {
            alert("所有学生已抽完！");
            return;
        }
         clearInterval(intervalId); // 清除旧定时器
            bgm.play(); // 播放音效
            intervalId = setInterval(() => {
                const randomIndex = Math.floor(Math.random() * availablePhotos.length); // 生成随机索引
                document.getElementById('main-photo').src = availablePhotos[randomIndex]; // 切换图片
            }, 100); // 每100ms切换一次
        }

        // 停止随机切换
        function stopRandom() {
              if(availablePhotos.length === 0) return;
				        clearInterval(intervalId);
				        bgm.pause();
				        bgm.currentTime = 0;
	        
						// 正确获取文件名，处理编码和路径
						const src = document.getElementById('main-photo').src;
						const filenameEncoded = src.split('/').pop();
						const selectedPhoto = decodeURIComponent(filenameEncoded);

	        addToHistory(selectedPhoto);
  
        // 从可用数组中移除已选图片
        availablePhotos = availablePhotos.filter(photo => photo !== selectedPhoto);
        
        }

        // 添加抽中历史记录（带评分功能）
        function addToHistory(photoSrc) {
            const historyDiv = document.getElementById('history');
            
            // 创建图片容器
            const container = document.createElement('div');
            container.style.display = 'inline-block';
            container.style.position = 'relative';
            
            // 创建图片元素
            const img = document.createElement('img');
            img.className = 'history-photo';
            img.src = photoSrc;
            img.dataset.stars = 0; // 初始化评分数据
            
            // 创建星星容器
            const starContainer = document.createElement('div');
            starContainer.className = 'star-container';
            
            // 组装元素
            container.appendChild(img);
            container.appendChild(starContainer);
            historyDiv.appendChild(container);

            // 添加点击评分功能
            img.addEventListener('click', function() {
                let currentStars = parseInt(this.dataset.stars);
                
                // 限制最大评分数量
                if(currentStars >= 5) {
                    starContainer.style.animation = 'shake 0.5s'; // 抖动提示
                    setTimeout(() => starContainer.style.animation = '', 500);
                    return;
                }
                
                currentStars++;
                this.dataset.stars = currentStars; // 更新评分数据
                
                // 创建新星星元素
                const newStar = document.createElement('div');
                newStar.className = 'star';
                newStar.innerHTML = '★';
                starContainer.appendChild(newStar);
                
                // 重置动画属性
                setTimeout(() => newStar.style.animation = 'none', 500);
            });
        }

        // 添加抖动动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes shake {
                0% { transform: translateX(-50%) translateX(0); }
                25% { transform: translateX(-50%) translateX(-5px); }
                50% { transform: translateX(-50%) translateX(5px); }
                75% { transform: translateX(-50%) translateX(-5px); }
                100% { transform: translateX(-50%) translateX(0); }
            }
        `;
        document.head.appendChild(style); // 注入样式表
        

    </script>
</body>
</html>

四、修改及说明：

只使用上面的完整代码，并不能显示学生照片。

下面是保姆式详细教程。

在“随机点名.html”这个文件同一个文件夹中，需要有下面一些文件：

1.背景图片：相框.jpg，一般是横式的图片，如下面二个图片的样子，你可以直接在这里把图片另存到你的文件夹中，文件名就是：相框.jpg。

2.学生照片：图片1.jpg、图片2.jpg、图片3.jpg、.......图片10.jpg、图片21.jpg等。图片文件的命名规则是用数字表示，扩展名.jpg用小写字母。如果你一共有30个学生，就要有30张照片。照片一般为3：4竖向的照片，类似于这里显示的样子，像素尽量不要小于300*400，不然会不清晰。像素大于这个数值，显示时会固定为300*400，所以你不用担心照片必须是完全相同大小的。

关于照片的程序代码：

第151行中： <img id="main-photo" src="图片1.jpg">，这是默认的未抽取时显示的图片，记得选一张喜欢的帅小伙或小姐姐美美的照片。

第170行中： const N = 8; // 假设图片总数 N=8（可根据实际情况修改）

这个数字8表示一共有8张图片要抽取，如果你班级有30个学生，那就是要把8改成30，这个务必要与实际照片的张数相同，也就是要有图片1.jpg—图片30.jpg共30张照片。

3.背景音乐的文件名为：tension.mp3。

这个随机抽取学生，比抽姓名更有趣味。也可以用于抽取合作小组，如教学中分成6个小组，那就用6张照片表示6个小组，抽取时随机抽小组，小组互动后，可以点击照片给小组评星（评分）。

相关推荐

12、高阶组件:魔法增幅器——React 19 HOC模式

一、魔法增幅器的本质"高阶组件是魔法师用咒语叠加的炼金术，"霍格沃茨魔咒研究院院长凝视着发光的增幅器，"通过函数式能量场的嵌套，让基础组件获得预言家日报式的逻辑继承！"...

深入理解nodejs的异步IO与事件模块机制

一、node为什么要使用异步I/O异步最先诞生于操作系统的底层，在底层系统中，异步通过信号量、消息等方式有广泛的应用。但在大多数高级编程语言中，异步并不多见，这是因为编写异步的程序不符合人习惯的思维逻...

前端时间同步利器:React + useEffect 实现高性能动态时钟

前言在你奋笔疾敲代码的瞬间，是不是突然一低头，发现时间像偷偷跑路的变量，一眨眼就从上午飘到下午？饭没吃、会没开、工位也快被前端猫霸占了。仿佛你写的不是代码，而是“时间穿梭机”。别慌，咱们今天就来用R...

JavaScript 异步编程指南 - 聊聊 Node.js 中的事件循环

作者：五月君来源：编程界|事件循环是一种控制应用程序的运行机制，在不同的运行时环境有不同的实现，上一节讲了浏览器中的事件循环，它们有很多相似的地方，也有着各自的特点，本节讨论下Node.js中...

10个Vue开发技巧「实践」

作者：WahFung转发链接：https://juejin.im/post/5e8a9b1ae51d45470720bdfa路由参数解耦一般在组件内使用路由参数，大多数人会这样做：...

通过番计时器实例学习 React 生命周期函数 componentDidMount

大家好，今天我们将通过一个实例——番茄计时器，学习下如何使用函数生命周期的一个重要函数componentDidMount()：componentDidMount()，在组件加载完成，render之后...

SRE监控四大黄金指标，任何一个有异常都会是灾难……

导读...

前端必看!10 个 Vue3 救命技巧，解决你 90% 的开发难题?

写Vue3项目时，是不是总被数据更新延迟、组件间传值混乱、页面加载缓慢这些问题折磨得头秃？别担心！作为摸爬滚打多年的老前端，今天掏出压箱底的10个实战技巧，从性能优化到复杂逻辑处理，每一个都能...

如何用2 KB代码实现3D赛车游戏?2kPlus Jam大赛了解一下

选自frankforce作者：Frank机器之心编译参与：王子嘉、GeekAI控制复杂度一直是软件开发的核心问题之一，一代代的计算机从业者纷纷贡献着自己的智慧，试图降低程序的计算复杂度。然而，将一款...

证明你访问的网站是你想访问的，Safari 真的需要

安全研究员在Safari上找到了一个新漏洞，能让网站在浏览器的地址栏内将自己伪装成另一个网站——得益于Safari地址栏的“智能缩略”功能。在Deusen最近公开的攻击演示（PoC，P...

抓狂!TS 组件性能拉胯到崩溃?4 个绝杀技巧逆风翻盘!

前端兄弟姐妹们五一假期快乐，咱们谁还没被TypeScript组件的性能问题折磨过？页面加载转圈圈，点击按钮没反应，代码改了一轮又一轮，性能却还是原地踏步，分分钟想砸电脑！别慌，今天这4个绝杀技...

让小球做圆周运动，你有几种办法?

最近在阅读外国技术文章中无意中发现了一个神奇的CSS属性motion-path，它可以让Dom元素可以按照自定义的路径移动。又想起了很久之前参加校招面试的时候，面试官问了我一个问题“能不能不借助库实现...

前端基础进阶(十四):深入核心，详解事件循环机制

EventLoopJavaScript的学习零散而庞杂，很多时候我们学到了一些东西，但是却没办法感受到进步！甚至过了不久，就把学到的东西给忘了。为了解决自己的这个困扰，在学习的过程中，我一直在试图寻...

从0搭建一个WebRTC，实现多房间多对多通话，并实现屏幕录制

这篇文章开始会实现一个一对一WebRTC和多对多的WebRTC，以及基于屏幕共享的录制。本篇会实现信令和前端部分，信令使用fastity来搭建，前端部分使用Vue3来实现。为什么要使用WebRTCWe...

Vue2 开发卡壳?这 10 个实战技巧专治各种不服

干前端开发的兄弟，谁还没被Vue2折腾过？数据不更新、组件通信乱成麻、性能差到想砸电脑……这些痛点，我都懂！今天直接甩出10个超实用的实战技巧，每一个都是从项目“血坑”里爬出来总结的，专...

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

一周热门
最近发表
标签列表