网站首页 > 技术文章 正文
用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个小组，抽取时随机抽小组，小组互动后，可以点击照片给小组评星（评分）。
猜你喜欢
- 2025-06-18 如何在 WordPress 中添加 CSS 进度条(无 jQuery 或 JavaScript)
- 2025-06-18 原生JS实现惯性滚动，给鼠标滚轮增加阻尼感，纵享丝滑
- 2025-06-18 CSS小知识，分享14个你可能还未用上但又实用的CSS属性(下)
- 2025-06-18 如何使用CSS从height: 0;过渡到height: auto;
- 2025-06-18 10个案例详解AnimatableExtend装饰器定义可动画属性
- 2025-06-18 520最强PHP表白代码来了（php表白墙源码校园版）
- 2024-07-31 css3各种动画的基本使用方法（css3中动画属性的原理和实现方法）
- 2024-07-31 动画交互是未来趋势，来看看网页动画设计最基础的十二个原则
- 2024-07-31 Html5第四天练习（html5题目）
- 2024-07-31 按钮引导“呼吸”效果（按钮功能）
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)