当前位置: 首页 > news >正文

DeepSeek网页版随机点名器

用DeepSeek帮我们生成了一个基于html5的随机点名器,效果非常棒,如果需要加入名字,请在代码中按照对应的格式添加即可。
提示词prompt
帮我生成一个随机点名的HTML5页面 生成真实一点的名字数据 点击随机按钮开始随机选择 要有闪动的效果 ,再次点击即可停止 并生成随机出来的名字 还可以再次随机生成 UI简洁美观
在这里插入图片描述
在这里插入图片描述
使用方法 复制源码到html文件中,双击运行即可。
随机点名器所有源码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机点名系统</title><style>body {font-family: 'Helvetica Neue', Arial, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);margin: 0;padding: 0;height: 100vh;display: flex;justify-content: center;align-items: center;color: #333;}.container {background-color: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);width: 90%;max-width: 500px;padding: 30px;text-align: center;}h1 {margin-top: 0;color: #4a6baf;font-weight: 500;}.name-display {font-size: 2.5rem;height: 120px;display: flex;align-items: center;justify-content: center;margin: 30px 0;border: 2px dashed #ddd;border-radius: 8px;transition: all 0.3s;}.flashing {animation: flash 0.2s infinite alternate;}@keyframes flash {from {color: #333;background-color: white;}to {color: #4a6baf;background-color: #f0f4ff;}}button {background-color: #4a6baf;color: white;border: none;border-radius: 50px;padding: 12px 30px;font-size: 1.1rem;cursor: pointer;transition: all 0.3s;box-shadow: 0 4px 10px rgba(74, 107, 175, 0.3);}button:hover {background-color: #3a5a9f;transform: translateY(-2px);box-shadow: 0 6px 15px rgba(74, 107, 175, 0.4);}button:active {transform: translateY(0);}.history {margin-top: 20px;font-size: 0.9rem;color: #666;}</style>
</head>
<body><div class="container"><h1>随机点名系统</h1><div id="nameDisplay" class="name-display">点击开始随机选择</div><button id="randomBtn">开始随机</button><div class="history">已选: <span id="history"></span></div></div><script>// 真实名字数据const names = ["张伟", "王芳", "李娜", "刘强", "陈静", "杨光", "赵敏", "黄磊", "周杰", "吴秀波", "郑爽", "孙俪", "马化腾", "朱军", "胡歌", "林心如", "郭德纲", "何炅", "高圆圆", "罗永浩", "梁朝伟", "谢娜", "宋丹丹", "董卿", "徐峥", "沈腾", "贾玲", "白岩松", "章子怡", "范冰冰", "吴京", "邓超", "杨幂", "刘诗诗", "赵丽颖", "迪丽热巴", "古力娜扎", "杨洋", "李易峰", "鹿晗", "吴亦凡", "张艺兴", "黄子韬", "王俊凯", "易烊千玺", "王源", "蔡徐坤", "王一博", "肖战", "李现", "朱一龙", "张一山", "杨紫", "关晓彤", "欧阳娜娜", "周冬雨", "马思纯", "井柏然", "陈赫", "郑恺", "包贝尔", "王宝强", "黄渤", "徐静蕾", "韩寒", "冯小刚", "张艺谋", "陈凯歌", "姜文", "葛优", "周润发", "刘德华", "张学友", "郭富城", "黎明", "梁家辉", "张家辉", "古天乐", "刘青云", "吴彦祖", "金城武"];const nameDisplay = document.getElementById('nameDisplay');const randomBtn = document.getElementById('randomBtn');const historyDisplay = document.getElementById('history');let isRandomizing = false;let randomInterval;let selectedNames = [];randomBtn.addEventListener('click', function() {if (!isRandomizing) {// 开始随机isRandomizing = true;randomBtn.textContent = '停止';nameDisplay.classList.add('flashing');// 快速切换名字randomInterval = setInterval(() => {const randomIndex = Math.floor(Math.random() * names.length);nameDisplay.textContent = names[randomIndex];}, 100);} else {// 停止随机isRandomizing = false;randomBtn.textContent = '再次随机';nameDisplay.classList.remove('flashing');clearInterval(randomInterval);// 确保最终选中的名字不在历史记录中重复let selectedName;do {const randomIndex = Math.floor(Math.random() * names.length);selectedName = names[randomIndex];} while (selectedNames.includes(selectedName) && selectedNames.length < names.length);nameDisplay.textContent = selectedName;selectedNames.push(selectedName);// 更新历史记录if (selectedNames.length > 5) {selectedNames.shift();}historyDisplay.textContent = selectedNames.join(', ');}});</script>
</body>
</html>

相关文章:

DeepSeek网页版随机点名器

用DeepSeek帮我们生成了一个基于html5的随机点名器&#xff0c;效果非常棒&#xff0c;如果需要加入名字&#xff0c;请在代码中按照对应的格式添加即可。 提示词prompt 帮我生成一个随机点名的HTML5页面 生成真实一点的名字数据 点击随机按钮开始随机选择 要有闪动的效果 &…...

Elasticsearch索引字段的类型

在 Elasticsearch 中&#xff0c;索引字段的类型&#xff08;即 Mapping 中的字段类型&#xff09;对搜索和存储性能影响很大。下面是各种常用数据类型的用途及推荐使用场景总结&#xff1a; 1. keyword 类型&#xff08;精确匹配&#xff09; 适合数据&#xff1a; 不需要分词…...

大模型在慢性病毒性肝炎预测及诊疗方案制定中的应用研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、慢性病毒性肝炎概述 2.1 疾病定义与分类 2.2 发病机制与病理特征 2.3 流行病学现状 三、数据收集与预处理 3.1 数据来源 3.2 数据清洗 3.3 特征工程 四、大模型选择与构建 4.1 模型选择依据 4.2 模型…...

DAY 43 复习日

浙大疏锦行https://blog.csdn.net/weixin_45655710 第一步&#xff1a;寻找并准备图像数据集 在Kaggle等平台上&#xff0c;你可以找到大量用于图像分类任务的数据集&#xff0c;例如英特尔图像分类数据集 (Intel Image Classification) 或手写数字识别数据集 (Digit Recogni…...

SQL学习笔记3

SQL常用函数 1、字符串函数 函数调用的语法&#xff1a;select 函数&#xff08;参数); 常用的字符串函数有&#xff1a; 拼接字符串&#xff0c;将几个字符串拼到一起&#xff1a;concat (s1,s2,……); select concat(你好,hello); update mytable set wherefo concat(中…...

JVM调优实战 Day 7:JVM线程分析与死锁排查

【JVM调优实战 Day 7】JVM线程分析与死锁排查 文章标签 jvm调优, 线程分析, 死锁排查, JVM监控, Java性能优化, JVM参数配置 文章简述 在Java应用的高并发场景中&#xff0c;线程管理与死锁问题往往是性能瓶颈的根源。本文作为“JVM调优实战”系列的第7天&#xff0c;深入解析…...

Android-Layout Inspector使用手册

Layout Inspector Android Layout Inspector 是 Android Studio 中用于调试应用布局的工具 启动方法&#xff1a; 通过下载Layout Inspector插件&#xff0c;在 “View - Tool Windows - Layout Inspector” 或 “Tools - Layout Inspector” 启动。 主要界面区域&#xff1a…...

【51单片机5毫秒定时器】2022-6-1

缘由单片机的代码&#xff0c;求大家来帮帮我-编程语言-CSDN问答 #include "REG52.h" unsigned char code smgduan[]{0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f,0x6f,0x77,0x7c,0x39,0x5e,0x79,0x71,0,64}; //共阴0~F消隐减号 unsigned char Js0, miao0;//中断…...

Flutter 多平台项目开发指南

Flutter 多平台项目开发指南 本指南将帮助你从 0 到 1 创建并适配一个支持 Android / iOS / Web / Windows / macOS / Linux 的 Flutter 多平台项目。 ✅ 一、创建支持多平台的 Flutter 项目 flutter create my_multi_platform_app cd my_multi_platform_app默认会生成支持以…...

Mac电脑如何搭建基于java后端的开发的各种工具服务

1. 确认Mac的CPU架构 首先&#xff0c;确认您的Mac是使用Intel还是Apple Silicon&#xff08;如M1芯片&#xff09;架构&#xff1a; uname -m如果返回x86_64&#xff0c;表示是Intel架构。如果返回arm64&#xff0c;表示是Apple Silicon架构。 2.安装IDEA Download Intelli…...

深入解析前端 Meta 标签:HTML 的隐形守护者与功能大师

在构建现代网页时&#xff0c;我们常常关注炫目的视觉效果、复杂的交互逻辑或强大的框架&#xff0c;却容易忽略那些深藏于 <head> 之中、看似不起眼的 <meta> 标签。这些标签如同网页的隐形守护者&#xff0c;无声地承担着定义文档元数据、指导浏览器行为、优化搜…...

CRON表达式编辑器与定时任务实现技术文档

1. 前端CRON表达式编辑器组件 CronExpressionEditor.vue组件是系统中用于创建和编辑CRON表达式的核心UI组件&#xff0c;它提供了直观的界面来生成复杂的定时任务表达式。 1.1 组件结构与状态管理 // 核心状态变量 const second ref<string>(0); const minute ref&…...

45. 跳跃游戏 II

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向后跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1] 的最…...

《解锁AudioSet:开启音频分析的无限可能》

音频新时代的 “密钥”&#xff1a;AudioSet 登场 在科技飞速发展的今天&#xff0c;音频作为信息传播与交互的关键媒介&#xff0c;早已渗透到现代科技的各个角落。从智能手机中的语音助手&#xff0c;让我们通过简单的语音指令就能查询信息、发送消息&#xff0c;到智能家居系…...

环境太多?不好管理怎么办?TakMll 工具帮你快速切换和管理多语言、多版本情况下的版本切换。

本篇文章主要介绍一款环境管理工具&#xff0c;即TakMll&#xff0c;通过简单的入口命令 “tkm” 即可快速的管理多种语言下、多种版本的环境切换&#xff0c;诸如快速切换PHP、同时存在java、mave等不同版本。 作者&#xff1a;任聪聪 日期&#xff1a;2025年6月26日 TakMll 特…...

spring-ai 1.0.0 (1)模型调用能力

听说1.0是一个非常好用的版本&#xff0c;最后还是扛不住听说的压力&#xff0c;为了落实自己悬浮心理&#xff0c;自己还是着手实践一下了。 第一步pom集成&#xff1a; 参考spring-projects/spring-ai | DeepWiki维基以及官方文档入门 &#xff1a;&#xff1a; Spring AI …...

如何在 Manjaro Linux 上启用 AUR 仓库来安装软件包

Manjaro 是基于 Arch 的系统&#xff0c;是了解和学习 Arch Linux 命令的绝佳方式。它自带所有流行的桌面环境界面&#xff0c;无论是 XFCE 还是 Gnome 的爱好者&#xff0c;都可以在 Manjaro 中直接使用。 Manjaro 或 Arch Linux 的默认软件包管理器是 Pacman&#xff0c;我们…...

简单使用python

本文章没有深入探讨python&#xff0c;只说语法格式&#xff0c;合适于有其他编程语言的基础、并想快速使用python的人查看。 一、print() 用于打印信息&#xff0c;括号中可以是数学运算表达式或者字符串&#xff08;或者说是文字&#xff09;。 print(hello!) 1.1、转义字…...

2025服务端java搭建篇:蜻蜓I即时通讯系统私有化部署深度指南-优雅草卓伊凡|麻子|贝贝

2025服务端java搭建篇&#xff1a;蜻蜓I即时通讯系统私有化部署深度指南-优雅草卓伊凡|麻子|贝贝 前言 蜻蜓I即时通讯系统是一款不依赖第三方服务的私有化即时通讯解决方案&#xff0c;本指南将详细介绍如何使用宝塔面板在CentOS系统上完成系统的完整部署。私有化部署意味着您…...

用Streamlit开发第一个Python应用程序

用Streamlit开发第一个Python应用程序 Using Streamlit to Develop the First Application in Python By JacksonML 1.Streamlit简介 Streamlit是个新出世的、功能强大的Python第三方库&#xff0c;将为基于Web的Python应用程序大放异彩。 Streamlit官网主页面如下&#x…...

IDEA + Spring Boot + javadoc 实例应用

1、添加 javadoc 插件 依赖 pom.xml <build><plugins><!-- javadoc 插件 --><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-javadoc-plugin</artifactId><version>3.6.3</version><…...

【机器学习深度学习】交互式线性回归 demo

目录 一、环境准备 二、Demo 功能 三、完整交互 demo 代码 3.1 执行代码 3.2 示例交互演示 3.3 运行结果 3.4 运行线性图 使用 PyTorch 构建交互式线性回归模型&#xff1a;输入数据、拟合直线、图像可视化并实现实时预测&#xff0c;助你深入理解机器学习从数据到模型的…...

新手向:Anaconda3的安装与使用方法

我们在刚开始接触Python时使用的是Python的直接编译器,如果我们需要进行其他的项目编写往往需要使用另一个版本的Python ,这样反复的下载很是麻烦并且还会造成系统变量的紊乱.这次我们引入Anaconda3,可创建虚拟的Python环境,满足不同项目的需要,当不用的时候可以直接放心删除不…...

详解零拷贝

目录 一、用户态&#xff08;User Mode&#xff09;和内核态&#xff08;Kernel Mode&#xff09; 1.1 用户态 (User Mode)&#xff1a; 1.2 内核态 (Kernel Mode)&#xff1a; 1.3 关键交互&#xff1a;系统调用 (System Call) 二、为什么需要区分用户态和内核态&#x…...

微服务常用的基础知识

1.微服务介绍 1.1 产生背景 随着互联网的发展&#xff0c;网站应用的规模不断扩大&#xff0c;传统单体架构逐渐难以应对大型网站高并发、高扩展性等需求&#xff0c;于是分布式系统架构应运而生。Spring Cloud 就是在这种背景下诞生的&#xff0c;它利用 Spring Boot 的开发便…...

【开源工具】Windows一键配置防火墙阻止策略(禁止应用联网)| 附完整Python源码

🛡️【开源工具】Windows一键配置防火墙阻止策略(禁止应用联网)| 附完整源码 🌈 个人主页:创客白泽 - CSDN博客 🔥 系列专栏:🐍《Python开源项目实战》 💡 热爱不止于代码,热情源自每一个灵感闪现的夜晚。愿以开源之火,点亮前行之路。 🐋 希望大家多多支持,…...

6月份最新代发考试战报:思科华为HCIP HCSE 考试通过

6月份最新代发考试战报&#xff1a;思科华为HCIP HCSE 考试通过 H19-423 HCSA-Presales-IP Network 数通考试通过&#xff0c; H12-725 HCIP-Security安全 考试通过&#xff0c;H13-121 HCIP-Kunpeng Application Developer鲲鹏计算 考试通过&#xff0c;CCNP 350-401考试通过…...

本地部署开源时间跟踪工具 Kimai 并实现外部访问( Windows 版本)

Kimai 是一款开源的时间跟踪工具&#xff0c;它易于使用&#xff0c;并提供了强大的报告功能&#xff0c;在个人和团队记录工作时间、项目时间和活动时间等之后可以帮助用户了解他们是如何花费时间的&#xff0c;从而提高生产力和效率。本文将详细介绍如何在 Windows 系统本地部…...

SpringBoot 中 @Transactional 的使用

SpringBoot 中 Transactional 的使用 一、Transactional 的基本使用二、Transactional 的核心属性三、使用避坑&#xff08;失效场景&#xff09;3.1 自调用问题3.2 异常处理不当3.3 类未被 Spring 管理3.4 异步方法内使用失效 四、工作实践4.1 事务提交之后执行一些操作4.2 事…...

Mac电脑安装iTerm2通过rz命令上传文件到远程服务器

背景 闲着没事买了个云服务器玩&#xff08;京东云轻量云主机&#xff09;&#xff0c;Mac本地搞了个java的jar包&#xff0c;想上传到云服务器&#xff0c;通过scp命令在Mac自带的【终端】上怎么都上传不了&#xff0c;如图。但是通过ssh命令&#xff08;ssh root主机IP &…...

供应链数据可视化大屏

在全球化与数字化转型的双重浪潮下&#xff0c;供应链管理正面临前所未有的挑战&#xff1a;黑天鹅事件频发、多环节协同效率低下、库存与成本难以平衡……如何让供应链更透明、更敏捷、更具韧性&#xff1f;供应链数据可视化大屏应运而生&#xff0c;成为企业破解管理痛点的关…...

A2O MAY登上央视《中国音乐TOP榜》舞台,展现新歌榜冠军实力

——A2O MAY凭借新歌《BOSS》登上中国QQ音乐新歌榜冠军后&#xff0c;成功出演CCTV音乐节目《中国音乐TOP榜》&#xff0c;以实力赢得瞩目。 由A2O Entertainment&#xff08;以下简称A2O&#xff09;推出的全球女团 A2O MAY&#xff08;成员包括朱晨予CHENYU、李诗洁SHIJIE、…...

关于如何在 Git 中切换到之前创建的分支的方法

文章目录 关于如何在 Git 中切换到之前创建的分支的方法一、确保你在项目目录中二、查看所有分支&#xff08;可选&#xff09;三、切换到目标分支四、如果分支仅在远程存在五、验证是否切换成功六、常见问题处理七、总结命令流程 PS:下次进入分支时&#xff0c;只需完成步骤1 …...

vue3+element-plus 组件功能实现 上传功能

一、整体功能概述 这段代码实现了一个基于 Vue 3 和 Element Plus 组件库的文件导入及预览功能模块。主要包含了一个主导入对话框&#xff08;用于上传文件、展示文件相关信息、进行导入操作等&#xff09;以及一个用于预览文件内容的预览对话框。支持导入特定格式&#xff08;…...

多相机人脸扫描设备如何助力高效打造数字教育孪生体?

在教育数字化转型浪潮中&#xff0c;数字孪生体作为现实教育场景的虚拟映射&#xff0c;正成为智慧教育发展的关键技术支点。传统教育模式面临师资资源分布不均、个性化教学难以覆盖、跨时空教学场景受限等痛点&#xff0c;而数字孪生体通过构建高仿真虚拟教育主体&#xff08;…...

高中成绩可视化平台开发笔记

高中成绩可视化平台&#xff08;1&#xff09; 一、项目概述 本系统是一个基于 PyQt5 和 Matplotlib 的高中成绩数据可视化分析平台&#xff0c;旨在帮助教师快速了解学生成绩分布、班级对比、学科表现等关键指标。平台支持文科与理科的数据切换&#xff0c;并提供多个维度的图…...

圆周期性显示和消失——瞬态实现(CAD c#二次开发、插件定制)

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Timers; [assembly: CommandClass(typeof(IfoxDemo.Commands))] namespace IfoxDemo {// 新增的圆形闪烁命令实…...

Spark SQL to_json 函数介绍

目录 前言函数介绍参数说明示例 前言 在Apache Hive中&#xff0c;并没有内置的to_json函数。在Apache Spark SQL中确实有to_json函数,它可以用来将结构化数据&#xff08;如结构化类型或MAP类型&#xff09;转换为JSON字符串。这个功能对于需要将表格数据输出为JSON格式的场景…...

5个免费的硬盘分区工具,操作简单功能全

电脑用久了&#xff0c;系统盘空间告急、数据盘混乱无序&#xff0c;很多人想重新分区&#xff0c;却又担心太复杂或怕搞坏硬盘。其实&#xff0c;只要用对工具&#xff0c;分区操作其实一点都不难。更重要的是&#xff0c;有很多免费的分区软件&#xff0c;不仅好用&#xff0…...

uniapp事件onLoad区分大小写

区分大小写。不然会不起作用。onLoad方法中的功能均不会被执行。 除了功能逻辑要检查外。大小写是要认真检查的一部分...

Flutter Riverpod 使用详细解析

&#x1f4da; Flutter 状态管理系列文章目录 Flutter 状态管理(setState、InheritedWidget、 Provider 、Riverpod、 BLoC / Cubit、 GetX 、MobX 、Redux) setState() 使用详解&#xff1a;原理及注意事项 InheritedWidget 组件使用及原理 Flutter 中 Provider 的使用、注…...

算法打卡 day4

4 . 高精度算法 性质&#xff1a;数组或者容器从低位往高位依次存储大整数&#xff0c;方便进位。 4.1 高精度加法 给定两个正整数&#xff08;不含前导 0&#xff09;&#xff0c;计算它们的和。 输入格式 共两行&#xff0c;每行包含一个整数。 输出格式 共一行&#xff0c;…...

权威认证!华宇TAS应用中间件荣获CCRC“中间件产品安全认证”

近日&#xff0c;华宇TAS应用中间件顺利通过了中国网络安全审查认证和市场监管大数据中心(CCRC)的信息安全认证&#xff0c;获得了IT产品信息安全认证证书。此次获证&#xff0c;标志着华宇TAS应用中间件在安全性、可靠性及合规性等方面达到行业领先水平&#xff0c;可以为政企…...

【Linux网络编程】多路转接IO(二)epoll

目录 epoll初识 epoll的相关系统调用 epoll的工作原理 epoll的优点 epoll的工作方式 水平触发 Level Triggered 工作模式 边缘触发 Edge Triggered 工作模式 对比LT和ET 理解 ET 模式和非阻塞文件描述符 epoll的惊群问题 基于LT模式的epoll代码样例 epoll初识 按照man…...

flutter的包管理#资源管理#调试Flutter应用#Flutter异常捕获

2.5 包管理 2.5.1 简介 在软件开发中&#xff0c;很多时候有一些公共的库或 SDK 可能会被很多项目用到&#xff0c;因此&#xff0c;将这些代码单独抽到一个独立模块&#xff0c;然后哪个项目需要使用时再直接集成这个模块&#xff0c;便可大大提高开发效率。很多编程语言或开…...

Unity Netcode自定义数据传输——结构体及其序列化

在 Unity Netcode 中&#xff0c;要实现自定义数据的网络传输&#xff0c;确实需要两个关键部分&#xff1a; ✅ 两个必需组件&#xff1a; 数据结构定义 public struct PlayerState : INetworkSerializable {public int id; // 字段1&#xff1a;玩家IDpublic bool …...

Vue 3 高级编程技巧

Vue 3 高级编程技巧 1. 计算属性 (Computed Properties) 含义&#xff1a;计算属性在依赖变化时会自动更新。以下是一个示例&#xff0c;展示当 firstName 或 lastName 变化时&#xff0c;fullName 也会更新。 实例&#xff1a; <script setup> import { ref, comput…...

GraphQL注入 -- GPN CTF 2025 Real Christmas

part 1 服务器会每段时间禁用已注册的账号,此处存在漏洞 def deactivate_user_graphql(email):graphql_endpoint current_app.config["GRAPHQL_ENDPOINT"]query f"""mutation {{deactivateUser (user: {{email: "{email}"}}){{ success…...

python打卡day43

疏锦行 作业&#xff1a; kaggle找到一个图像数据集&#xff0c;用cnn网络进行训练并且用grad-cam做可视化 进阶&#xff1a;并拆分成多个文件 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms# 数据预处理 tra…...

ethers.js express vue2 定时任务每天凌晨2点监听合约地址数据同步到Mysql整理

下面是一个完整的 Ethers.js Express Vue2 MySQL 实现方案&#xff0c;用于&#xff1a; &#x1f4a1;每天凌晨 2 点监听某合约地址的 Transfer 事件&#xff0c;写入 MySQL 数据库&#xff0c;并展示每日 NFT 交易量图表&#xff08;Vue2 ECharts&#xff09; ✅ 后端部分…...