用deepseek设计制作随机点名(不重复抽取图片)程序
zhezhongyun 2025-07-02 00:12 4 浏览
用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个小组,抽取时随机抽小组,小组互动后,可以点击照片给小组评星(评分)。
相关推荐
- css 垂直居中的几种实现方式(css怎么实现垂直居中)
-
前言设计是带有主观色彩的,同样网页设计中的css一样让人摸不头脑。网上列举的实现方式一大把,或许在这里你都看到过,但既然来到这里我希望这篇能让你看有所收获,毕竟这也是前端面试的基础。实现方式备注:...
- CSS 中各种居中你真的玩明白了么(css中的居中属性)
-
页面布局中最常见的需求就是元素或者文字居中了,但是根据场景的不同,居中也有简单到复杂各种不同的实现方式,本篇就带大家一起了解下,各种场景下,该如何使用CSS实现居中前言页面布局中最常见的需求就是元...
- 浅谈3种css技巧——两端对齐(css两侧对齐)
-
在出里文字比较多的网页,文字对齐其中采用的两端对齐,两端对齐的方法有三种方法,如下:1.使用text-align:justifytext-align:justify属性是全兼容的,使用它实现两端对...
- 从零开发HarmonyOS(鸿蒙)运动手表小游戏—数字华容道
-
本个demo将从零基础开始完成鸿蒙小游戏APP在可穿戴设备上的编译,此处以运动手表为例,在项目中我们所使用到的软件为DevEcoStudio,下载地址为:DevEcoStudio下载、DevEco...
- 教师如何制作随机点名系统,活跃课堂气氛
-
上课点名抽学生回答问题,做游戏……由老师口头点名,点谁回答总有点老师本人的情绪,且显得毫无趣味,但做一个点名系统,就不一样了,电脑随机抽出的名字,不仅公平,还会给孩子们带来一种不一样的感受。那么怎么做...
- 看京铁人如何破解电煤运输"烤"验
-
“天气太热了!空调是我的避暑必备神器再往冰箱里冻些雪糕和西瓜电风扇也要24小时上岗了”近日京津冀地区迎来高温天气小伙伴们都在分享解暑妙招但这些妙招背后都离不开一个字——“电”为确保电力平稳“迎峰度夏”...
- 回家的路就是最美的风景 幸福就在前方
-
2025年春运启动以来,无数在外游子踏上归乡旅程。为了帮助更多旅客按时回家过年,还有很多人不分昼夜、不辞辛苦地奔波在铁路线上。“我的列车飞驰而过,那是梦想的前方,回家的路就是最美的风景。”END&l...
- 如何做出一个香消玉殒的网页文字特效
-
最近,迷上了CSS3特效,空闲时间学一些小案例,非专业,爱好。不断学习也能掌握一些更为全面的html,css,JavaScript的知识,以小博大,从兴趣出发再掌握更多网页开发知识。闲言少叙,直接开怼...
- 第1000篇原创,我想对你说______(2021我想对你说1000)
-
亲爱的小伙伴今天您看到的这篇推送是“北京铁路”发布的第1000篇原创作品!这不仅是一个数字的跨越更是我们一路走来与每一位关注者共同铸就的辉煌里程碑每一篇文章都承载着我们的心血与热情每一次传播都离不开大...
- 动车组的“家”在哪里?(动车组的"家"在哪里?举例说明)
-
夜幕降临随着动车组列车驶入站台乘客陆续离开动车组也完成了一天的工作准备启程回“家”有小伙伴儿会问“为什么大多数动车组列车夜间不运行呢?”这是因为白天行驶一天的动车组要利用晚上的时间进行全面检查、维修和...
- 这套铁路“高考”卷,请你来作答(郑州铁路职业技术学院高考河南录取分数线)
-
今天是2025年全国高考的第一天小编为大家准备了一套北京铁路版的试卷满分120分共12道单选题快来试试你能得多少分吧!·<animateattributeName="opacity"begi...
- HarmonyOS Text组件Span间距解决方案
-
HarmonyOSText组件Span间距解决方案一、问题分析在HarmonyOS开发中,Text组件内的Span子组件无法直接设置margin/padding属性,需要通过文本级属性实现间距控制。...
- 考“火车驾驶证”,难不难?(火车驾驶证怎么考需要什么条件)
-
····<animateattributeName="height"begin="0.1"dur="0.01s"fill="freeze"to="0"/>00:0002:59未加...
- 高温?京铁人:我有“物理外挂”!(点开看有多爽)
-
近几日华北地区气温不断上升高温来袭坚守岗位的京铁人开启清凉避暑的“物理外挂”快动动手指点开看看吧·<animateattributeName="opacity"begin="click+0....
- 2025年Top30 CSS面试题及答案(css常考面试题)
-
概述CSS(层叠样式表)是构建美观、响应式网站的关键技术。无论您是在准备前端开发者面试还是复习知识,这里都有一份精心挑选的2025年每个开发者都应该知道的30个CSS面试题及答案。1.什么是CSS...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)