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

摘要：给老师们送福利了，下面是关于用#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功能键，可以全屏显示。

课堂随机点名不重复 /* 居中容器 - 用于包裹主内容和操作按钮 */ .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倍 */ } 抽取停止

抽中记录：

// 初始化数据 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); // 注入样式表

四、修改及说明：

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

下面是保姆式详细教程。

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

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

相框.jpg

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