浏览器打开抽奖系统html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线抽奖 随机选取 自动挑选</title>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
body {background-color: aliceblue;
}
.wrapDiv {width: 80%;max-width: 1200px;margin: 0 auto;text-align: center;position: absolute;top: 80px;left: 0;right: 0;
}
.leftBox {float: left;width: 800px;height: 240px;margin: 0 auto;margin-top: 0px;clear: both;
}
#span {float: right;top: 30px;right: 185px;
}
#btn {float: left;width: 200px;height: 100px;text-align: center;line-height: 100px;margin-left: 500px;margin-top: 200px;background: linear-gradient(to right, #ff0000, #ff9900, #ffff00, #33cc33, #3399ff); /* 设置背景渐变 */color: white;font-size: 18px;font-weight: bold;border: none;cursor: pointer;
}.nameBox {width: 200px;height: 50px;float: left;margin-left: 10px;margin-top: 10px;text-align: center;line-height: 50px;
}.nameBox:nth-child(1) {background-color: #f44336; /* 红色 */
}.nameBox:nth-child(2) {background-color: #9c27b0; /* 紫色 */
}.nameBox:nth-child(3) {background-color: #2196f3; /* 蓝色 */
}.nameBox:nth-child(4) {background-color: #4caf50; /* 绿色 */
}.nameBox:nth-child(5) {background-color: #ff9800; /* 橙色 */
}.nameBox:nth-child(6) {background-color: #ffeb3b; /* 黄色 */
}.nameBox:nth-child(7) {background-color: #00bcd4; /* 青色 */
}.nameBox:nth-child(8) {background-color: #e91e63; /* 桃红色 */
}.nameBox:nth-child(9) {background-color: #8bc34a; /* 浅绿色 */
}.nameBox:nth-child(10) {background-color: #607d8b; /* 钢蓝色 */
}.nameBox:nth-child(11) {background-color: #673ab7; /* 深紫色 */
}.nameBox:nth-child(12) {background-color: #ff5722; /* 橙红色 */
}.nameBox:nth-child(13) {background-color: #3f51b5; /* 中蓝色 */
}.nameBox:nth-child(14) {background-color: #795548; /* 暗褐色 */
}.nameBox:nth-child(15) {background-color: #009688; /* 深绿色 */
}.nameBox:nth-child(16) {background-color: #ff4081; /* 粉红色 */
}.nameBox:nth-child(17) {background-color: #9e9e9e; /* 灰色 */
}.nameBox:nth-child(18) {background-color: #ffc107; /* 金黄色 */
}.nameBox:nth-child(19) {background-color: #cddc39; /* 青绿色 */
}.nameBox:nth-child(20) {background-color: #03a9f4; /* 亮蓝色 */
}.nameBox:nth-child(21) {background-color: #ff1744; /* 鲜红色 */
}/* 可以继续定义更多的 .nameBox:nth-child(n) 规则来设置不同的颜色 */.selectedName {float: right;width: 300px;background: #666;margin-top: 10px;margin-left: 30px;background: #ffffff;overflow-y: scroll; /* 添加垂直滚动条 */
}h1 {text-align: center;
}
</style>
</head>
<body>
<h1>随机抽奖系统</h1>
<span id="span"></span><div class="wrapDiv"><div id="leftBox" class="leftBox"></div><div id="selectedName" class="selectedName"><h1>礼物</h1><!-- 中奖者名单内容将动态添加 --></div><input type="button" id="btn" value="点这里开启幸运之旅">
</div><script>
// 模拟后台数据
var arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10","11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21",
];var orgArrCount = arr.length;
var currentSelectNum = 0;initForm();// 初始化表单
function initForm() {// 动态设置选择人的高度var selectedNameHeight = orgArrCount / 3 * 40 + 300;$("#selectedName").css("height", selectedNameHeight + "px");// 动态创建图层dynamicCreateBox();
}// 动态创建层
function dynamicCreateBox() {for (var i = 0; i < arr.length; i++) {var div = document.createElement("div");div.innerText = arr[i];div.className = "nameBox";$("#leftBox").append(div);};
}// 清空小方格颜色
function clearBoxColor() {$("#leftBox").children("div").each(function() {$(this).css("background-color", "");});
}// 设置选中小方格颜色
function setBoxColor() {$("#leftBox").children("div").each(function() {var thisText = ($(this).text());var selectedName = arr[currentSelectNum];if (thisText == selectedName) {$(this).css("background-color", "red");}});
}function appendSelectedName() {var div = document.createElement("div");div.innerText = arr[currentSelectNum];div.className = "nameBox";$("#selectedName").append(div);
}$('#btn').click(function() {var curentCount = arr.length;if (curentCount < 1) {alert("已经抽完这个奖池了");// 清空所有层的颜色clearBoxColor();return;}// 监视按钮的状态if (this.value === "点这里开启幸运之旅") {// 定时针timeId = setInterval(function() {// 清空所有层的颜色clearBoxColor();//随机生成一个数var num = Math.floor(Math.random() * curentCount);currentSelectNum = num;// 设置选中小方格颜色setBoxColor();}, 10);this.value = "停止";} else {// 清除计时器clearInterval(timeId);// 添加选中人appendSelectedName();// 移除arr.splice(currentSelectNum, 1);this.value = "点这里开启幸运之旅";}
});// 获取时间的函数
getTime();
setInterval(getTime, 10)function getTime() {var day = new Date();var year = day.getFullYear(); //年var month = day.getMonth() + 1; //月var dat = day.getDate(); //日var hour = day.getHours(); //小时var minitue = day.getMinutes(); //分钟var second = day.getSeconds(); //秒month = month < 10 ? "0" + month : month;dat = dat < 10 ? "0" + dat : dat;hour = hour < 10 ? "0" + hour : hour;minitue = minitue < 10 ? "0" + minitue : minitue;second = second < 10 ? "0" + second : second;$("#span").text(year + "-" + month + "-" + dat + " " + hour + ":" + minitue + ":" + second);
}
</script></body>
</html>
相关文章：
浏览器打开抽奖系统html
<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>在线抽奖 随机选取 自动挑选</title> <script src"https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> body {…...
微信小程序-使用Component方法代替Page方法构造页面
一.使用Component方法的前提条件 在小程序js文件里使用Component方法代替Page方法需要在json文件里面定义usingComponents属性 {"usingComponents": {} }二.注意事项 1.在page页面里使用的钩子函数和事件监听方法都需要写在methods对象里面 methods:{update(){thi…...
Spark SQL----DISTRIBUTE BY子句
Spark SQL----DISTRIBUTE BY子句 一、描述二、语法三、参数四、例子 一、描述 DISTRIBUTE BY子句用于根据输入表达式对数据进行重新分区。与CLUSTER BY子句不同，这不会对每个分区内的数据进行排序。 二、语法 DISTRIBUTE BY { expression [ , ... ] }三、参数 e…...
HTML5-canvas1
1、canvas：创建画布 <canvas id"canvas"></canvas>2、画一条直线 var canvasdocument.getElementById(cancas）; canvas.width800; canvas.height800; var contextcanvas.getContext(2d); //获得2d绘图上下文环境 //画一条直线 c…...
【NOI-题解】1009 - 数组逆序1162 - 数组元素的删除1211 - 数组元素的插入1161. 元素插入有序数组1159. 数组元素的移动
文章目录 一、前言二、问题问题：1009 - 数组逆序问题：1162 - 数组元素的删除问题：1211 - 数组元素的插入问题：1161. 元素插入有序数组问题：1159. 数组元素的移动 三、感谢 一、前言 本章节主要对数组问题中数组元素移…...
新电脑如何设置 npm 源及查看源、安装 cnpm、pnpm 和 yarn 的详细教程
当你获得一台新电脑，或需要在现有电脑上优化 JavaScript 和 Node.js 的开发环境时，正确配置 npm 是一步不可少的过程。本教程将详细指导你如何设置 npm 源，查看当前源，以及如何安装 cnpm、pnpm 和 yarn。 1. 设置 npm 源 npm (N…...
完全移动huggingface模型仓库（不是简单mv）
Linux中移动huggingface模型仓库 参考链接 先在bashrc中配置： export HF_DATASETS_CACHE"/your/path/dataset" export HF_HOME"/your/path/" export HUGGINGFACE_HUB_CACHE"/your/path/hub" export TRANSFORMERS_CACHE"/your…...
手机空号过滤批量查询的意义及方法
手机空号过滤批量查询是现代营销和通信管理中常用的技术手段，旨在通过批量处理手机号码，筛选出活跃号码和空号等无效号码，以提高营销效率和减少不必要的通信成本。以下是关于手机空号过滤批量查询的详细解答： 一、手机空号过滤批…...
Dockerfile制作部署wordpress-6.6
目录 一. 环境准备 二. 准备对应的配置文件 三. 编写Dockerfile 四. 构建镜像 五. 配置MySQL 六. 安装wordpress 七. 扩展 一. 环境准备 localhost192.168.226.25 rocky_linux9.4 Docker version 27.0.3 关闭防火墙和selinux，进行时间同步。 安装docker…...
项目的纪要
ai客服项目中发现的问题: 可以在控制台看到我们存储的cookie: 可以看到是这样的, 但是我们通过getCookie方法专门获取这个字段, 然后在控制台打印后 const userName getCookie(SA_USER_NICK_NAME); console.log(userName, userName); 输出结果是: 然后我们尝试通过de…...
ubuntu 更新源
前言 实现一键替换在线源 一键更新源 ubuntu 全球镜像站以下支持现有ubuntu 20，22，24 echo "Delete the default source" rm -rf /etc/apt/sources.listecho "Build a new source" cat <<EOF>>/etc/apt/sources.li…...
XGBoost、RF随机森林算法MATLAB实现
% 加载并预处理训练数据 opts1 = detectImportOptions(附件一AE.xlsx, PreserveVariableNames, true); train_data = readtable(附件一AE.xlsx, opts1); train_data.Time = datetime(train_data.time, InputFormat, yyyy-MM-dd HH:mm:ss); % 特征提取和标签准备 windowSize…...
WPF 解决: DataGrid 已定义列，但是还是会显示模型的所有属性的问题
AutoGenerateColumns 属性 AutoGenerateColumns：这个属性决定 DataGrid 是否根据数据源中的属性自动生成列。如果设置为 true，DataGrid 会根据数据源中的属性自动生成列。如果设置为 false，则 DataGrid 不会自动生成列，开发者需要…...
【ai】Easy-RAG ： ImportError: cannot import name ‘BaseModel‘ from ‘pydantic‘
[Bug]: cannot import name ‘RootModel’ from ‘pydantic’ #1237 版本不匹配导致 ImportError: cannot import name ‘BaseModel’ from ‘pydantic’ /home/zhangbin/miniconda3/envs/Easy-RAG/bin/python /home/zhangbin/proj/06_rag/02_Easy-RAG/webui.py /home/zhangbi…...
WebKit简介
WebKit是一个开源的浏览器引擎，最初由苹果公司开发，用于Safari浏览器。它是基于KDE项目的KHTML引擎进行开发，并在改进和扩展中形成了WebKit引擎。 WebKit的工作流程可以分为以下几个步骤： 1.解析HTML：当浏览器加载一个…...
笔记 | Python环境下的GUI编程常用包
前言 Python的使用频率和范围越来越大，在一些开发工作中由于需要可视化的图形界面，常常需要进行图形用户界面（Graphic User Interface, GUI）开发。例如，目前最火热的大模型应用，常常是以一个网页界面进行操…...
mysql 数据库空间统计sql
mysql 数据库空间统计 文章目录 mysql 数据库空间统计说明一、数据库存储代码二、查询某个数据库的所有表的 代码总结 说明 INFORMATION_SCHEMA Table Reference 表参考 information_schema是MySQL中的一个特殊数据库，它存储了关于所有其他数据库的元数据信息。…...
【Linux】线程——线程池、线程池的实现、线程安全的线程池、单例模式的概念、饿汉和懒汉模式、互斥锁、条件变量、信号量、自旋锁、读写锁
文章目录 Linux线程7. 线程池7.1 线程池介绍7.2 线程池的实现7.3 线程安全的线程池7.3.1 单例模式的概念7.3.2 饿汉和懒汉模式 8. 常见锁使用汇总8.1 互斥锁（Mutex）8.2 条件变量（Condition Variable）8.3 信号量（Semaph…...
stm32入门-----TIM定时器（PWM输出比较——下）
目录 前言 一、硬件元器件介绍 1.舵机 2.直流电机驱动 二、C语言编程步骤 1.开启时钟 2.配置输出的GPIO口 3.配置时基单元 4.初始化输出比较通道 5.开启定时器 三、实践项目 1.PWM驱动LED呼吸灯 2.PWM驱动舵机 3.PWM驱动直流电机 前言 本期我们就开始去进行TIM定时…...
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
效果： <div class"line"></div> .line {height: 1px;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a9c2ff 50%, rgba(255, 255, 255, 0) 100%);border-radius: 4px 4px 4px 4px; } CSS实现边框底部渐变色的方法:(最简单…...
【数据结构】建堆算法复杂度分析及TOP-K问题
【数据结构】建堆算法复杂度分析及TOP-K问题 🔥个人主页：大白的编程日记 🔥专栏：数据结构 文章目录 【数据结构】建堆算法复杂度分析及TOP-K问题前言一.复杂度分析1.1向下建堆复杂度1.2向上建堆复杂度1.3堆排序复杂度 二.TOP-K问…...
Thinkphp5实现前后端通过接口通讯基本操作方法
在ThinkPHP5框架中，实现前后端通过接口通讯是一个常见的需求，尤其是在开发RESTful API时。下面是一个基本的步骤指南，用于设置ThinkPHP5来创建API接口，并使前端能够通过HTTP请求与后端进行通讯。 1. 创建API模块 首先࿰…...
Go 语言任务编排 WaitGroup
WaitGroup 是常用的 Go 同步原语之一，用来做任务编排。它要解决的就是并发-等待的问题： 现在有一个 goroutine A 在检查点 （ checkpoint ) 等待一组 goroutine 全部完成它们的任务，如果这些 goroutine 还没全部完成任务，那么 goroutine A 就会被阻塞在检查点，直到所有的 …...
星环科技推出知识库产品 AI PC时代数据交互方式变革
随着企业业务的快速发展，数据量呈爆炸式增长，有效的知识管理成为企业面临的重要问题。企业遇到的普遍问题是大量的结构化、半结构化数据存储在不同的系统中，需要用多种计算机语言进行检索。而大模型彻底改变了人们和数据的交互方式࿰…...
10道JVM经典面试题
1、 JVM中，new出来的对象是在哪个区？ 2、 说说类加载有哪些步骤？ 3、 JMM是什么？ 4、 说说JVM内存结构？ 5、 MinorGC和FullGC有什么区别？ 6、 什么是STW? 7、 什么情况下会发生堆/栈溢出？…...
Redisson常用的数据结构及应用场景
Redisson 提供了一系列高级数据结构，这些数据结构封装了 Redis 的原生数据类型，提供了 Java API 的便利性和分布式特性。以下是 Redisson 中一些常用的数据结构，场景还在不断完善中： RBucket：这是一个简单的键值对存储…...
【实现100个unity特效之8】使用ShaderGraph实现2d贴图中指定部分局部发光效果
最终效果 寒冰法师 火焰法师 文章目录 最终效果寒冰法师火焰法师 素材一、功能分析实现方法基本思路Unity的Bloom后处理为什么关键部位白色？最终结果 二、 新建URP项目三、合并图片四、使用PS制作黑白图片方法一 手动涂鸦方法二 魔棒工具1. 拖入图片进PS࿰…...
Ubuntu 24.04 LTS Noble安装Docker Desktop简单教程
Docker 为用户提供了在 Ubuntu Linux 上快速创建虚拟容器的能力。但是，那些不想使用命令行管理容器的人可以在 Ubuntu 24.04 LTS 上安装 Docker Desktop GUI，本教程将提供用于设置 Docker 图形用户界面的命令…… Docker Desktop 是一个易于使用的集成容…...
XML 和 SimpleXML 入门教程
XML 和 SimpleXML 入门教程 XML（可扩展标记语言）是一种用于存储和传输数据的标记语言。它是一种自我描述的语言，允许用户定义自己的标签来表示数据。SimpleXML 是 PHP 中的一个扩展，用于解析和操作 XML 数据。本文将介绍 XML 和 …...
leetcode--链表类题目总结
本文作为刷题时对链表类题目的总结. 常见技巧: 引入虚拟头节点 便于处理边界情况便于对链表操作快慢双指针(判环,找环的入口等)链表逆序(推荐使用 虚拟头节点 头插法 进行逆序) 链表逆序( 头插法 虚拟头节点):链表内指定区间反转_牛客题霸_牛客网 虚拟节点:合并…...
太原建筑公司网站/滨州网站seo
先下载了Xampp，当时启动XAMPP Control里的MySQL是一点问题都没有的，但是后来自己又下载了一个新的MySQL，再启动xampp里的mysql就出问题了。 开始报错是3306端口被占用 于是开始艰苦的网上寻求答案的过程，我将失败的尝试也都写出…...
时时彩网站是怎么做的/网络推广是什么职业
题目传送门 题意： 构造出一个数列，数字在$1~n$的范围内，要求$\sum_{i1}^n count(i)^{2}$最小，$count(i)$的意思是数列中i出现的次数。并且数列要满足两种类型的条件，一个是$a_i->a_j$全部大于v，还有$a_…...
四川省建设规划局官方网站/竞价推广是什么工作
原文：http://bbs.landingbj.com/t-0-240751-1.html1. 使用mysql explain 对sql执行效率进行检测 ，explain显示了mysql如何使用索引来处理select语句以及连接表。可以帮助选择更好的索引和写出更优化的查询语句。1) 使用方法：在select语句前加…...
柳州网站开发/在线培训平台哪家好
缘由 由于现在替省厅工作，年底了要向地市收很多文件，哪些地市已报，哪些没报，需要一目了然。 我的处理方式是收什么文件就针对该文件新建一个目录，然后在该目录下为所有地市建一个占位文件。 等收到项某市的材料&#x…...
接单做网站怎么开价格/想做百度推广找谁
一、公共WIFI综述 现在很多公司都在做免费WIFI，车站、公交、地铁、餐厅，只要是人员密集流动的地方就有WIFI，免费WIFI从最初的网页认证方式也逐渐向客户端认证方式偏移。本文主要讨论iOS认证上网的解决方案。 iOS端WIFI应用的相关开发…...
大连 盘古建站/百度的客服电话是多少
简述：添加 https步骤：1. 制作证书生成sslkeytool -genkey -alias ssl_tomcat -keyalg RSA -keystore ./testssl -validity 2000密码：testssl生成ssl路径C:\Users\Administrator\Desktop\ssl\testssl2. 配置tomcat修改tomcat -> conf/serve…...