当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2025-07-02 00:12 34 浏览

用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个小组，抽取时随机抽小组，小组互动后，可以点击照片给小组评星（评分）。

@keyframes 规则

上一篇：零 JS!4.6 万行 HTML+CSS 手搓《我的世界》，服务器被网友玩爆
下一篇：2025年Top30 CSS面试题及答案（css常考面试题）

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

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

Python每日一库之Beautiful Soup（python mtime）

怎么用三种代码写「九九乘法表」（如何编写九九乘法表的程序）

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

旧手机新玩法，MacroDeck进阶指南

业余无线电UV段几种常见天线（uv段最强天线）