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

【经典】抽奖系统(HTML，CSS、JS)

news 2026/3/29 10:25:02

目录

1、添加参与者

2、多次添加

3、点击抽奖

功能介绍：

使用方法：

完整代码：

一个简单但功能强大的抽奖系统的示例，用于在网页上实现抽奖。

1、添加参与者

2、多次添加

3、点击抽奖

功能介绍：

  1. 参与者添加：
    • 用户可以输入参与者名字并点击“添加参与者”按钮将其加入列表。
    • 添加的名字会显示在页面下方的列表中。
  2. 开始抽奖：
    • 点击“开始抽奖”按钮，系统会随机从已添加的参与者中选出一个作为中奖者。
    • 抽奖结果会显示在页面上。
  3. 动态更新：
    • 参与者列表动态更新，显示所有参与者的序号和名字。

使用方法：

  1. 打开浏览器，保存并运行此HTML文件。
  2. 输入参与者名字并点击“添加参与者”。
  3. 点击“开始抽奖”，查看中奖结果。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>抽奖系统</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}.container {text-align: center;padding: 20px;background: white;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.title {font-size: 24px;font-weight: bold;margin-bottom: 20px;}.input-area {margin-bottom: 20px;}input, button {padding: 10px;margin: 5px;border-radius: 5px;border: 1px solid #ddd;font-size: 16px;}button {background: #007BFF;color: white;cursor: pointer;}button:hover {background: #0056b3;}.result {font-size: 18px;color: #28a745;margin-top: 20px;}</style>
</head>
<body><div class="container"><div class="title">高级抽奖系统</div><div class="input-area"><input type="text" id="participant" placeholder="输入参与者名字"><button onclick="addParticipant()">添加参与者</button></div><div><button onclick="startLottery()">开始抽奖</button></div><div class="result" id="result"></div><ul id="participantsList"></ul></div><script>const participants = [];function addParticipant() {const input = document.getElementById('participant');const name = input.value.trim();if (name) {participants.push(name);updateParticipantsList();input.value = '';} else {alert('请输入有效的名字！');}}function updateParticipantsList() {const list = document.getElementById('participantsList');list.innerHTML = '';participants.forEach((name, index) => {const li = document.createElement('li');li.textContent = `${index + 1}. ${name}`;list.appendChild(li);});}function startLottery() {if (participants.length === 0) {alert('请先添加参与者！');return;}const winnerIndex = Math.floor(Math.random() * participants.length);const winner = participants[winnerIndex];document.getElementById('result').textContent = `恭喜 ${winner} 中奖！`;}</script>
</body>
</html>

 如果需要更多高级功能，例如奖品设置、多轮抽奖等，可以进一步扩展逻辑！

嗨，我是命运之光。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。

点击这里👉 ，获取最新动态，⚡️ 让信息传递更加迅速。

相关文章：

【经典】抽奖系统(HTML，CSS、JS)

目录 1、添加参与者 2、多次添加 3、点击抽奖 功能介绍&#xff1a; 使用方法&#xff1a; 完整代码&#xff1a; 一个简单但功能强大的抽奖系统的示例&#xff0c;用于在网页上实现抽奖。 1、添加参与者 2、多次添加 3、点击抽奖 功能介绍&#xff1a; 参与者添加&…...

编程日记 2024/11/26 5:50:22

GoF设计模式——结构型设计模式分析与应用

文章目录 UML图的结构主要表现为&#xff1a;继承&#xff08;抽象&#xff09;、关联 、组合或聚合 的三种关系。1. 继承&#xff08;抽象&#xff0c;泛化关系&#xff09;2. 关联3. 组合/聚合各种可能的配合&#xff1a;1. 关联后抽象2. 关联的集合3. 组合接口4. 递归聚合接…...

编程日记 2024/11/26 5:49:21

Java后端如何进行文件上传和下载 —— 本地版

简介&#xff1a; 本文详细介绍了在Java后端进行文件上传和下载的实现方法&#xff0c;包括文件上传保存到本地的完整流程、文件下载的代码实现&#xff0c;以及如何处理文件预览、下载大小限制和运行失败的问题&#xff0c;并提供了完整的代码示例。 大体思路 1、文件上传 …...

编程日记 2024/11/26 5:48:19

json格式数据集转换成yolo的txt格式数据集

这个代码是参考了两个博客 我是感觉第一篇博客可能有问题&#xff0c;然后自己做了改进&#xff0c;如果我是错误的或者正确的&#xff0c;请各位评论区说一下&#xff0c;感谢 Json格式的数据集标签转化为有效的txt格式(data_coco)_train.json-CSDN博客 COCO&#xff08;.j…...

编程日记 2024/11/26 5:47:19

什么是Three.js，有什么特点

什么是 Three.js&#xff1f; Three.js 是一个基于 WebGL 技术的 JavaScript 3D 库。它允许开发者在网页上创建和展示 3D 图形内容&#xff0c;而无需用户安装任何额外的插件或软件。Three.js 简化了 WebGL 的复杂性&#xff0c;使得即便是对图形编程不太熟悉的人也能快速上手…...

编程日记 2024/11/26 5:46:16

Linux笔记--基于OCRmyPDF将扫描件PDF转换为可搜索的PDF

1--官方仓库 https://github.com/ocrmypdf/OCRmyPDF 2--基本步骤 # 安装ocrmypdf库 sudo apt install ocrmypdf# 安装简体中文库 sudo apt-get install tesseract-ocr-chi-sim# 转换 # -l 表示使用的语言 # --force-ocr 防止出现以下错误&#xff1a;ERROR - PriorOcrFoundE…...

编程日记 2024/11/26 5:45:15

Unity 导出 Xcode 工程 修改 Podfile 文件

Unity 导出 Xcode 工程 修改 Podfile 文件 在 Editor 文件夹下新建 xxx.cs 脚本 实现静态方法 [PostProcessBuild]public static void OnPostprocessBuild(BuildTarget target, string pathToBuiltProject){// Unity 导出 Xcode 工程自动调用这个方法 }using System.IO; using…...

编程日记 2024/11/26 5:44:14

UE5 slate BlankProgram独立程序系列

源码版Engine\Source\Programs\中copy BlankProgram文件夹&#xff0c;重命名为ASlateLearning&#xff0c;修改所有文件命名及内部名称。 ASlateLearning.Target.cs // Copyright Epic Games, Inc. All Rights Reserved.using UnrealBuildTool; using System.Collections.Ge…...

编程日记 2024/11/26 5:42:13

内存不足引发C++程序闪退崩溃问题的分析与总结

目录 1、内存不足一般出现在32位程序中 2、内存不足时会导致malloc或new申请内存失败 2.1、malloc申请内存失败&#xff0c;返回NULL 2.2、new申请内存失败&#xff0c;抛出异常 3、内存不足项目实战案例中相关细节与要点说明 3.1、内存不足导致malloc申请内存失败&#…...

编程日记 2024/11/26 5:41:12

C++ —— 以真我之名 如飞花般绚丽 - 智能指针

目录 1. RAII和智能指针的设计思路 2. C标准库智能指针的使用 2.1 auto_ptr 2.2 unique_ptr 2.3 简单模拟实现auto_ptr和unique_ptr的核心功能 2.4 shared_ptr 2.4.1 make_shared 2.5 weak_ptr 2.6 shared_ptr的缺陷&#xff1a;循环引用问题 3. shared_ptr 和 unique_…...

编程日记 2024/11/26 5:40:11

Linux中安装InfluxDB

什么是InfluxDB InfluxDB是一个开源的时间序列数据库&#xff0c;专为处理时间序列数据而设计。时间序列数据是指带有时间戳的数据点&#xff0c;例如传感器数据、应用程序日志、服务器指标等。InfluxDB 由 InfluxData 公司开发&#xff0c;广泛应用于物联网&#xff08;IoT&am…...

编程日记 2024/11/26 5:39:10

nginx服务器实现上传文件功能_使用nginx-upload-module模块

目录 conf文件内容如下html文件内容如下上传文件功能展示 conf文件内容如下 #user nobody; worker_processes 1;error_log /usr/logs/error.log; #error_log /usr/logs/error.log notice; #error_log /usr/logs/error.log info;#pid /usr/logs/nginx.pid;events …...

编程日记 2024/11/26 5:38:08

ORB-SLAM2源码学习：Initializer.cc:Initializer::ComputeF21地图初始化——计算基础矩阵

前言 在平面场景我们通过求解单应矩阵H来求解位姿&#xff0c;但是我们在实际中常见的都是非平面场景&#xff0c; 此时需要用基础矩阵F求解位姿。 1.函数声明 cv::Mat Initializer::ComputeF21(const vector<cv::Point2f> &vP1, const vector<cv::Point2f>…...

编程日记 2024/11/26 5:37:07

C# 读取多条数据记录导出到 Word标签模板之图片输出改造

目录 应用需求 设计 范例运行环境 配置Office DCOM 实现代码 组件库引入 ​核心代码 调用示例 小结 应用需求 在我的文章《C# 读取多条数据记录导出到 Word 标签模板》里&#xff0c;讲述读取多条数据记录结合 WORD 标签模板输出文件的功能&#xff0c;原有输出图片的…...

编程日记 2024/11/26 5:35:05

NSSCTF web刷题

1 虽然找到了flag,但是我要怎么去改他的代码,让他直接输出flag呢? (好像是要得到他的json代码,这题不让看) 2 wllm应该就是他的密码,进入许可了 意思是服务器可以执行通过POST的请求方式传入参数为wllm的命令&#xff0c;那这就是典型的命令执行&#xff0c;当然&#xff0c…...

编程日记 2024/11/26 5:33:03

对象排序得到方式

java实现 list 排序的方式&#xff0c;有三种 ① 对象实现Comparable 接口&#xff0c;然后代码里直接调用Collections.sort(list) ②使用内部类Comparator ③使用stream.sort 代码如下 实现Comparable接口的实体类 Data public class Student implements Comparable<Stud…...

编程日记 2024/11/26 5:32:02

Day2 洛谷1035+1047+1085+1089+1150+1151

零基础洛谷刷题记录 Day1 2024.11.18 Day2 2024.11.25 文章目录 零基础洛谷刷题记录1035:题目描述1035&#xff1a;解答代码1035&#xff1a;学习成果1047&#xff1a;题目描述&#xff08;成功写出&#xff09;1047&#xff1a;解答代码1047&#xff1a;学习成果1085&#xf…...

编程日记 2024/11/26 5:31:01

Linux：进程间通信之进程池和日志

一、进程池的设计 因为每一次我们要进行进程间通信都需要fork&#xff0c;和操作系统做交互是存在很大成本的&#xff0c;所以我们是不是可以提前fork出几个进程&#xff0c;然后当我们想要使用的时候直接去给他们安排任务&#xff0c;这样就减少了系统调用的次数从而提高了内存…...

编程日记 2024/11/26 5:29:57

详细介绍HTTP与RPC：为什么有了HTTP，还需要RPC？

目录 一、HTTP 二、RPC 介绍 工作原理 核心功能 如何服务寻址 如何进行序列化和反序列化 如何网络传输 基于 TCP 协议的 RPC 调用 基于 HTTP 协议的 RPC 调用 实现方式 优点和缺点 使用场景 常见框架 示例 三、问题 问题一&#xff1a;是先有HTTP还是先有RPC&…...

编程日记 2024/11/26 5:28:55

Paddle Inference部署推理（十二）

十二&#xff1a;Paddle Inference推理 &#xff08;python&#xff09;API详解 15. PredictorPool 类 PredictorPool 对 Predictor 进行了简单的封装&#xff0c;通过传入 config 和 thread 的数目来完成初始化&#xff0c;在每个线程中&#xff0c;根据自己的线程 id 直接从…...

编程日记 2024/11/26 5:27:55

Display Driver Uninstaller完全指南：解决显卡驱动残留的系统级清理方案

Display Driver Uninstaller完全指南&#xff1a;解决显卡驱动残留的系统级清理方案 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-dri…...

编程新知 2026/3/29 9:56:15

全平台数据采集工具：BarrageGrab直播弹幕实时抓取解决方案

全平台数据采集工具&#xff1a;BarrageGrab直播弹幕实时抓取解决方案 【免费下载链接】BarrageGrab 抖音快手bilibili直播弹幕wss直连&#xff0c;非系统代理方式&#xff0c;无需多开浏览器窗口 项目地址: https://gitcode.com/gh_mirrors/ba/BarrageGrab 在数字直播时…...

编程新知 2026/3/29 8:21:45

用Python脚本让Crazyflie 2.X无人机动起来：手把手教你写第一个自主飞行程序

用Python脚本让Crazyflie 2.X无人机动起来&#xff1a;从零编写自主飞行程序 当第一次看到Crazyflie这个巴掌大的无人机在桌面上悬停时&#xff0c;我意识到微小型飞行器的编程控制远比想象中更有趣。与传统无人机不同&#xff0c;Crazyflie 2.X系列通过Python脚本就能实现毫米…...

编程新知 2026/3/29 8:09:40

造相 Z-Image镜像使用指南：显存监控条预警机制与OOM防护策略

造相 Z-Image镜像使用指南&#xff1a;显存监控条预警机制与OOM防护策略 1. 引言&#xff1a;为什么你的AI绘画服务总崩溃&#xff1f; 如果你用过一些开源的文生图模型&#xff0c;大概率遇到过这种情况&#xff1a;兴致勃勃地输入一段描述&#xff0c;点击生成&#xff0c;…...

编程新知 2026/3/29 7:45:30

UiBot调用Python插件报错？可能是运行环境惹的祸（附解决方案）

UiBot调用Python插件报错&#xff1f;深度解析环境冲突与5种高阶解决方案 当你在UiBot中调用精心编写的Python插件时&#xff0c;突然弹出的红色报错信息往往让人措手不及。特别是当代码在本地PyCharm中运行完美&#xff0c;却在UiBot中频频报错时&#xff0c;问题很可能出在环…...

编程新知 2026/3/29 7:25:24

**发散创新：基于Go语言的服务网格实践与流量治理实战**在微服务架构日益复杂的今天，**服务网格（Service Mesh）**

发散创新&#xff1a;基于Go语言的服务网格实践与流量治理实战 在微服务架构日益复杂的今天&#xff0c;服务网格&#xff08;Service Mesh&#xff09; 已成为云原生生态中不可或缺的一环。它通过将网络通信逻辑从应用代码中剥离出来&#xff0c;实现了对服务间调用的精细化控…...

编程新知 2026/3/29 7:17:23

SPI Flash时序参数详解：如何用Synopsys VIP验证Micron芯片的HOLD时序

SPI Flash时序验证实战&#xff1a;Synopsys VIP在Micron芯片HOLD时序分析中的应用 当硬件验证工程师面对SPI Flash芯片时&#xff0c;时序参数的精确验证往往是项目成败的关键。Micron作为主流存储芯片供应商&#xff0c;其SPI Flash产品广泛应用于嵌入式系统和FPGA设计中&…...

编程新知 2026/3/29 6:12:23

Vite 8 架构革新：从双引擎到 Rolldown 统一打包的演进之路

1. Vite 8 架构革新的背景与痛点 如果你用过 Vite 7 或更早版本&#xff0c;一定对它的闪电般开发体验印象深刻。这主要得益于 Vite 独特的双引擎架构&#xff1a;开发时用 esbuild 实现毫秒级启动&#xff0c;生产环境则用 Rollup 保证打包质量。但我在实际项目中发现&#xf…...

编程新知 2026/3/29 5:44:05

Qwen3.5-4B-Claude-Opus-GGUF保姆级教程：从零启动Web问答服务全流程

Qwen3.5-4B-Claude-Opus-GGUF保姆级教程&#xff1a;从零启动Web问答服务全流程 1. 模型与平台介绍 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。…...

编程新知 2026/3/29 5:19:58

华为仓颉语言实战：除了‘hello world’，还能用数组和循环做什么？（数字统计案例详解）

华为仓颉语言实战&#xff1a;数字统计案例与核心语法深度解析 刚学会在仓颉语言中打印"hello world"的你&#xff0c;是否好奇这门新兴语言还能做什么&#xff1f;让我们从一个实际案例出发——统计正整数中各数字出现的频次。这个看似简单的任务&#xff0c;却能带…...

编程新知 2026/3/29 4:27:08