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

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

news 2026/2/9 18:19:12

目录

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/8 15:03:14

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/12/16 18:04:55

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

编程新知 2025/9/24 3:56:34

pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...

编程新知 2026/1/26 21:38:28