HTMLcss实现网站抽奖
代码由 HTML、CSS 和 JavaScript 三部分组成,HTML 负责页面的结构搭建,CSS 负责页面的样式设计,JavaScript 负责实现抽奖的交互逻辑。
HTML 部分
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./assets/global.css"><!-- 内联样式 --><style>/* 样式规则 */</style>
</head><body><div class="prize-container"><!-- 奖品项 --><div class="prize-item" style="left: 0;top: 0;"></div><!-- ... 其他奖品项 ... --><div class="prize-turn" style="left: 200px;top: 200px;">开始转动</div></div><script type="module"> // JavaScript 代码</script>
</body></html>
<!DOCTYPE html>
:声明文档类型为 HTML5。<html>
:根元素,lang="en"
表示页面语言为英语。<head>
:包含页面的元数据,如字符编码、兼容性设置、视口设置,还引入了外部样式表./assets/global.css
,并定义了内联样式。<body>
:页面的主体部分,包含一个prize-container
容器,其中有 8 个prize-item
元素表示奖品项,一个prize-turn
元素作为开始转动的按钮。<script>
:引入 JavaScript 代码,type="module"
表示使用 ES6 模块语法。
CSS 部分
.prize-container {position: relative;
}.prize-container .prize-item,
.prize-container .prize-turn {position: absolute;width: 200px;height: 200px;display: flex;align-items: center;justify-content: center;user-select: none;box-sizing: border-box;
}.prize-container .prize-turn {background-color: #fff;cursor: pointer;border-radius: 50%;border: 1px solid rgb(209, 92, 92);font-size: 30px;transform: scale(.5, .5);color: rgb(209, 92, 92);transition: all .4s ease-in;
}.prize-container .prize-item {border: 4px solid transparent;
}.prize-container .prize-item img {width: 100%;height: 100%;object-fit: cover;opacity: .9;
}.prize-container .prize-item>div {position: absolute;width: 100%;text-align: center;left: 0;font-weight: bold;color: beige;line-height: 30px;bottom: 0;background-color: rgba(0, 0, 0, .3);
}.prize-container .prize-turn:active {background-color: rgb(209, 92, 92);color: #fff;
}.prize-container .prize-item.active {border-color: #eb9c26;
}
.prize-container
:设置为相对定位,作为奖品项和转动按钮的父容器。.prize-item
和.prize-turn
:设置为绝对定位,固定宽度和高度,使用 flex 布局使其内容居中,禁止用户选择文本。.prize-turn
:设置为白色背景,圆形,有边框和文字颜色,点击时背景和文字颜色会发生变化。.prize-item
:初始边框为透明。.prize-item img
:设置图片宽度和高度为 100%,保持图片比例并覆盖整个容器,透明度为 0.9。.prize-item > div
:设置奖品名称的样式,位于图片底部,有半透明背景。.prize-item.active
:当奖品项处于激活状态时,边框颜色变为#eb9c26
。
JavaScript 部分
import { Maths, Randoms, Animation } from "https://unpkg.com/@3r/tool"
// 获取所有的奖品项和转动按钮
let prizeDomList = document.querySelectorAll('.prize-item')
let prizeTurnDom = document.querySelector('.prize-turn')
let startIndex = 0;
// 奖品列表
let prizes = [{name: '苹果13',weight: 1,imgSrc: './assets/prizes/1.jpg'},// ... 其他奖品 ...
]// 展示奖品信息
for (let i = 0; i < prizeDomList.length; i++) {const prizeItem = prizeDomList[i];const prizeText = document.createElement('div')const prizeImage = document.createElement('img')prizeText.textContent = prizes[i].nameprizeImage.setAttribute("src", prizes[i].imgSrc)prizeItem.appendChild(prizeImage)prizeItem.appendChild(prizeText)
}// 等待时间函数
let waitTime = function (time) {return {then: function (resolve) {setTimeout(resolve, time)}}
}// 转动函数
let turn = async function () {let offset = 1 / (prizes.length * 10) // 执行次数let interval = 200; // 延迟let minInterval = 50; // 最小延迟let endIndex = Randoms.getRandomIndexByWeight(prizes) // 随机结束奖品let lastDom = nullfor (let i = 0; i <= 1; i += offset) {// 延迟时间await waitTime(Math.max(Animation.easeIn(i) * interval, minInterval))lastDom?.classList?.remove('active');lastDom = prizeDomList.item(startIndex % prizeDomList.length)lastDom.classList.add('active')if (i > .9 && (startIndex % prizeDomList.length === endIndex)) break;startIndex++;}let name = prizes[endIndex].namesetTimeout(() => {if (name == "再来一次")alert(`请${name}吧~`)elsealert(`您获得了${name}`)}, interval);
}// 点击事件监听
prizeTurnDom.addEventListener("click", turn)
- 导入模块:从
https://unpkg.com/@3r/tool
导入Maths
、Randoms
和Animation
模块。 - 获取元素:使用
querySelectorAll
和querySelector
获取所有奖品项和转动按钮。 - 奖品列表:定义了一个包含 8 个奖品的数组,每个奖品有名称、权重和图片路径。
- 展示奖品信息:遍历奖品项,为每个奖品项创建图片和名称元素,并添加到对应的奖品项中。
- 等待时间函数:
waitTime
函数返回一个对象,包含then
方法,用于实现异步延迟。 - 转动函数:
turn
函数实现了抽奖的转动逻辑,通过Randoms.getRandomIndexByWeight
方法根据权重随机选择一个奖品,然后循环遍历奖品项,逐渐增加激活状态的奖品项,直到达到随机选择的奖品项。 - 点击事件监听:为转动按钮添加点击事件监听器,点击时调用
turn
函数。
效果展示
相关文章:
HTMLcss实现网站抽奖
代码由 HTML、CSS 和 JavaScript 三部分组成,HTML 负责页面的结构搭建,CSS 负责页面的样式设计,JavaScript 负责实现抽奖的交互逻辑。 HTML 部分 <!DOCTYPE html> <html lang"en"><head><meta charset"…...
字节:视频一致性生成论文速读
一、引言 Phantom: Subject-Consistent Video Generation via Cross-Modal Alignment 是北京字节跳动智能创作团队提出的一种新型视频生成方法,旨在解决主体一致性视频生成的难题。该方法通过平衡文本和图像的双重模态提示,实现文本和视觉内容的深度对齐…...
JAVA常用分布式锁Redisson
1. 加锁过程 底层命令与数据结构 Redis 数据结构:使用 Hash 结构存储锁信息,Key 为锁名称,Field 为客户端唯一标识(如 UUID 线程ID),Value 为锁的重入次数。 Lua 脚本原子性:通过 Lua 脚本在…...
9.ArkUI List的介绍和使用
ArkUI List 组件详解与使用指南 List 是 ArkUI(HarmonyOS 开发框架)中用于展示长列表数据的高性能滚动容器组件。以下是 List 的详细介绍和使用方法。 基本介绍 List 组件特点: 支持垂直/水平滚动高性能渲染(仅渲染可视区域内…...
深度解析:从12306看混合云架构下的高并发系统设计
作为曾参与12306余票查询系统高并发升级的技术从业者,笔者注意到公众对于12306底层技术常存在认知盲区。为破解这一迷思,特此分享十年前的架构解密文献(该技术之前名叫 gemfire 现已晋升为Apache顶级项目Geode,代码库详见…...
解决 EasyExcel 填充图片占满单元格问题
本篇主要记录解决使用EasyExcel 填充图片的两个问题: 1. 如何根据标识填充 2.如果完全占满要显示的单元格 import com.alibaba.excel.EasyExcel; import com.alibaba.excel.ExcelWriter; import com.alibaba.excel.metadata.data.ImageData; import com.alibaba.e…...
汽车售后 D - PDU 和 J2543 详细介绍
D - PDU(Diagnostic Protocol Data Unit) 定义与标准1:D - PDU 是指诊断协议数据单元,ISO 22900 - 2 - 2017 D - PDU - API 是针对道路车辆的模块化车辆通信接口(MVCI)中诊断协议数据单元的编程接口标准。…...
【linux】Chrony服务器
简介 1.1 时间的重要性 由于 IT 系统中,准确的计时非常重要,有很多种原因需要准确计时: 在网络传输中,数据包括和日志需要准确的时间戳 各种应用程序中,如订单信息,交易信息等 都需要准确的时间戳 1.2 时区…...
深度剖析!GPT-image-1 API 开放对 AI 绘画技术生态的冲击!
4月24日凌晨,OpenAI正式发布了全新的图像生成模型“gpt-image-1”,并通过API向全球开发者开放使用,这意味着其GPT-4o的图像生成能力正式向开发者开放! 在这之前,GPT-4o的图像生成功能于今年3月25日由 OpenAI 创始人兼 …...
天能资管(SkyAi):精准投资匹配,定制资产配置新体验
在资产配置领域,随着市场环境的日益复杂和投资者需求的日益多样化,个性化和精准化已成为投资者最为关注的核心诉求。天能资管(SkyAi)作为新加坡BEAVER TOKEN基金会旗下的科技先锋,凭借其强大的AI技术和丰富的市场经验,创新性地推出了精准投资匹配服务,为投资者带来了前所未有的…...
volatile缓存可见性实现原理
1.缓存一致性问题 在多核处理器架构中,每个核心都有自己的缓存(Cache),而主内存是所有核心共享的。当一个线程在某个核心上修改了一个共享变量时,这个修改可能只会更新到该核心的缓存中,并不会立刻写回到主…...
【计算机视觉】CV实战- 深入解析基于HOG+SVM的行人检测系统:Pedestrian Detection
深入解析基于HOGSVM的行人检测系统:从理论到实践 技术核心:HOGSVM检测框架HOG特征原理SVM分类器 项目架构与数据准备INRIA Person数据集目录结构 实战指南:从零构建检测系统环境配置完整训练流程检测应用 关键技术问题与解决方案1. 难例挖掘不…...
HDRnet——双边滤波和仿射变换的摇身一变
主页:Deep Bilateral Learning paper:https://groups.csail.mit.edu/graphics/hdrnet/data/hdrnet.pdf coeffs 这部分的处理对象是低分辨率图,利用CNN进行特征提取(局部和全局),最后fuse得到gridÿ…...
Spring的xxxAware接口工作原理-笔记
1.Aware 接口的工作原理 Spring 提供了多个 XXXAware 接口(如 ApplicationEventPublisherAware、ApplicationContextAware、BeanFactoryAware 等),这些接口的核心作用是让 Bean 在初始化过程中自动获取特定的依赖。 实现 Aware 接口的 Bean…...
flume整合Kafka和spark-streaming核心编程
flume整合Kafka 需求1:利用flume监控某目录中新生成的文件,将监控到的变更数据发送给kafka,kafka将收到的数据打印到控制台: 1.查看topic 2.编辑flume-Kafka.conf,并启动flume 3.启动Kafka消费者 4.新增测试数据 5.查…...
第十四届蓝桥杯刷题——day20
第十四届蓝桥杯刷题——day20 引言题目一:工作时长题目二:与或异或题目三:翻转题目四:阶乘的和题目五:公因数匹配附录:源码gitee仓库 引言 蓝桥杯C研究生组(河北赛区)快要开赛了&…...
Python MCP客户端SDK实现
以下是一个用于与大模型MCP协议交互的Python客户端SDK实现: ```python import json import requests import uuid from typing import Dict, List, Any, Optional, Union from enum import Enum from datetime import datetime class MCPTaskType(Enum): TEXT_GENERATION…...
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
问题如下: 解决方法: 使用$nextTick和v-if,让el-table在页面渲染完成之后再显示 <el-table v-if"visile"></el-table> 获取数据的方法 getdata(){ //这里处理数据 this.visilefalse //不显示table组件 this.$nex…...
Vue 3 父子组件通信案例详解:Props 与 Emits 实战
前言 在 Vue 3 开发中,组件通信是最基础也是最重要的技能之一。本文将用实际案例演示 Vue 3 中最常用的两种父子通信方式:Props(父传子)和 Emits(子传父),帮助大家快速掌握 Composition API 下…...
kotlin与MVVM结合使用总结(三)
1. MVVM 架构详细介绍及源码层面理解 整体架构 MVVM(Model - View - ViewModel)架构是为了解决视图和数据模型之间的耦合问题而设计的。它通过引入 ViewModel 作为中间层,实现了视图和数据的分离,提高了代码的可维护性和可测试性…...
前端基础之《Vue(11)—自定义指令》
一、自定义指令 1、自己封装指令 什么是指令?指令本质上就是DOM功能的一种抽象封装。 如果有一些DOM功能经常用,但是Vue没有提供相关指令,建议自己封装。 2、自定义全局指令 使用Vue.directive(指令名, function() {})定义全局指令。 3、…...
第3.2节 Android应用调用链路分析
3.2.1 Android调用链路简介 在Android应用程序中,调用链路涉及应用程序中不同组件(如Activity、Service、BroadcastReceiver、ContentProvider)之间的调用关系,以及应用程序与系统服务之间的交互。了解和分析这些调用链路对于调试…...
Codeforces Round 1019 (Div. 2) ABC
A 模拟 思路 数组y是不同的,且所以xi * yi 相同,只有x数组全不同才可以满足要求 代码 LL n,m,k;void solve() {map<LL,LL> mp;cin >> n;for (int i 1;i < n;i ){LL x;cin >> x;mp[x] ;}cout << mp.size() << endl;…...
Babylon.js 材质统一转换指南:将 AssetContainer 中的所有材质转换为 PBRMetallicRoughnessMaterial
在现代 3D 开发中,基于物理的渲染(PBR)已成为行业标准。本文将详细介绍如何在 Babylon.js 中将 AssetContainer 加载的各种材质统一转换为 PBRMetallicRoughnessMaterial,实现项目材质的标准化。 为什么需要材质转换? PBRMetallicRoughness…...
Linux Platform驱动模型全解析:从入门到精通
Linux Platform驱动模型全解析:从入门到精通 1. Platform驱动模型概述 1.1 什么是Platform驱动模型 Platform驱动模型是Linux内核为处理非热插拔设备(通常是SoC集成外设)而设计的一套驱动框架。它通过虚拟的"platform总线"将硬件…...
7.Excel:单元格格式
一 案例 1.案例1 2.案例2 3.案例3 二 三种基本数据类型 补充:在没有任何格式的情况下是这样对齐的。 1.文本 默认左对齐,文本不可参与计算。 2.数值 默认右对齐,数值计算精度是15位。 若超出15位,超出部分显示为0。 3.逻辑值 …...
文件传输过滤器绕过:Exe2Hex
Exe2hex是****g0tmilk开发的一款工具,您可以**在这里找到它。该工具将 EXE 文件转录为一系列十六进制字符串**,DEBUG.exe或Powershell可以将其还原为原始 EXE 文件。之后,该脚本会在受害者机器上运行,重建并执行 EXE 文件。这在系统管理员阻止EXE 文件传输或上传的****高级…...
从多类缺陷到高良率跃升|公差分析技术重构动力电池装配精度体系
在新能源汽车产业升级关键期,动力电池装配精度和因装配引起的安全问题已成为制约产能提升的核心瓶颈。某头部电池企业通过 CETOL 6σ 公差分析技术,成功构建了复杂电池系统的精度控制体系。生产实践表明,微观尺度的公差偏差可能引发系统性质量…...
QT开发技术【QT实现桌面右下角消息】
一、效果 ![ 二、弹窗主体部分 noticewidget /* ** File name: NoticeWidget.h ** Author: ** Date: 2025-04-25 ** Brief: 通知栏控件 ** Copyright (C) 1392019713qq.com All rights reserved. */#include "../Include/NoticeWidget.h"…...
【使用层次序列构建二叉树(数据结构C)】
使用层次序列构建二叉树(C语言实现) 在数据结构学习过程中,二叉树的构建方式通常有递归建树(前序/中序)和层次建树(广度优先)两种。本文将介绍一种基于辅助队列实现的层次建树方法,并…...
【基于Qt的QQ音乐播放器开发实战:从0到1打造全功能音乐播放应用】
🌹 作者: 云小逸 🤟 个人主页: 云小逸的主页 🤟 motto: 要敢于一个人默默的面对自己,强大自己才是核心。不要等到什么都没有了,才下定决心去做。种一颗树,最好的时间是十年前,其次就是现在&…...
蓝桥杯 3. 密码脱落
密码脱落 原题目链接 题目描述 X 星球的考古学家发现了一批古代留下来的密码。 这些密码是由 A、B、C、D 四种植物的种子串成的序列。 仔细分析发现,这些密码串当初应该是前后对称的(即镜像串)。 由于年代久远,其中许多种子…...
数学基础 -- 欧拉恒等式的魅力:让复数旋转起来!
公式推导: e i π − 1 e^{i\pi} -1 eiπ−1 被誉为数学中最美的公式之一,它连接了五个数学中最重要的常数: e i π 1 0 (欧拉恒等式) e^{i\pi} 1 0 \tag{欧拉恒等式} eiπ10(欧拉恒等式) 这不仅是巧合,而是复数与三角函数…...
keil修改字体无效,修改字体为“微软雅黑”方法
在网上下载了微软雅黑字体,微软雅黑参考下载链接 结果在Edit->Configuration中找不到这个字体 这个时候可以在keil的安装目录中找到UV4/global.prop文件 用记事本打开它进行编辑,把字体名字改成微软雅黑 重新打开keil就发现字体成功修改了。 这个…...
LeetCode 每日一题 2845. 统计趣味子数组的数目
2845. 统计趣味子数组的数目 给你一个下标从 0 开始的整数数组 nums ,以及整数 modulo 和整数 k 。 请你找出并统计数组中 趣味子数组 的数目。 如果 子数组 nums[l…r] 满足下述条件,则称其为 趣味子数组 : 在范围 [l, r] 内,设 …...
二进制兼容性分析方法
I. 引言 在软件工程领域,二进制兼容性(Binary Compatibility)是一个核心概念,它指的是一个计算系统能够运行为另一个系统编译的可执行代码(通常是机器码)的能力,而无需重新编译 。这与源代码兼…...
在 WSL 安装 OpenFOAM-12
在 WSL 安装 OpenFOAM-12 参考链接安装教程问题整理1、安装完成后运行测试算例 Alllrun 脚本报错 参考链接 OpenFOAM OpenFoam-v12 OpenFOAM-v12-Ubuntu 安装教程 直接在 OpenFOAM 官网找到 Down -> OpenFOAM v12 选择 DownLoad v12 | Ubuntu -> Read More 具体安装过…...
Linux-06 ubuntu 系统截图软件使用简单记录
文章目录 原委一、Shutter二、Flameshot三、Ksnip 原委 原先使用的 Flameshot 截图软件,在ubuntu 18.04下可以正常使用。 系统升级到22.04 后,安装后的只能截图,不能标注,想着修复下。 以下是个人备忘录记录,如何使用…...
基于python代码的通过爬虫方式实现快手发布视频(2025年4月)
1、将真实的快手创作服务平台的cookie贴到代码目录中kuaishou_cookie.txt文件里,运行python脚本即可; 2、运行之前根据import提示安装一些常见依赖,比如requests等; 3、__NS_sig3.js的源码见快手NS sig3签名算法(2025年1月)_快手sig3算法源码-CSDN博客 4、2025年4月份…...
人工智能与机器学习:Python从零实现逻辑回归模型
🧠 向所有学习者致敬! “学习不是装满一桶水,而是点燃一把火。” —— 叶芝 我的博客主页: https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区! 🚀 让我们一起努力,共创…...
大模型助力嘉兴妇幼:数据分类分级的智能化飞跃
在医疗行业数字化转型进程中,数据已成为驱动服务升级与业务创新的核心要素。作为医疗行业数字化的探索者,嘉兴市妇幼保健院携手美创打造的智能化数据分类分级项目,数据识别率和分类分级率高达99%,分类分级准确率达90%,…...
MyBatisPlus文档
一、MyBatis框架回顾 使用springboot整合Mybatis,实现Mybatis框架的搭建 1、创建示例项目 (1)、创建工程 新建工程 创建空工程 创建模块 创建springboot模块 选择SpringBoot版本 (2)、引入依赖 <dependencies><dependency><groupId>org.springframework.…...
支持Function Call的本地ollama模型对比评测-》开发代理agent
目标是开发支持多个 Function 定义的智能体代理系统 ✅ 第一部分:是否支持多个函数(multi-function calling) 模型名称支持多个函数注册是否支持函数选择(name 匹配)是否能生成结构化参数OpenChat 3.5 / 3.5-0106✅&a…...
Docker拉取镜像代理配置实践与经验分享
Docker拉取镜像代理配置实践与经验分享 一、背景概述 在企业内网环境中,我们部署了多台用于测试与学习的服务器。近期,接到领导安排,需在其中一台服务器上通过Docker安装n8n应用程序。然而在实际操作过程中,遭遇Docker官方镜像库…...
Jinja 的详细介绍和学习方法
Jinja 是一种流行的 模板引擎(Template Engine),主要用于生成动态的文本内容(如 HTML、XML、配置文件等)。它最初是为 Python 的 Web 框架(如 Flask、Django)设计的,但也可以独立使用…...
在 Windows 系统上升级 Node.js
一、查询电脑端已经安装的 Node.js 版本 1、通过【winR】 键,输入 cmd,点击【确定】按钮打开 cmd 窗口 2、命令行界面输入 node -v 查看目前 Node.js 版本 3、命令行界面输入 npm -v 查看目前 npm 版本 二、进入官网地址下载安装包 1、官网地址&#x…...
特斯拉宣布启动自动驾驶网约车测试,无人出租车服务进入最后准备阶段
特斯拉公司于4月24日正式宣布,已在美国得克萨斯州奥斯汀和加利福尼亚州旧金山湾区启动自动驾驶网约车服务的员工内部测试。这项测试将为今年夏季计划推出的完全无人驾驶出租车服务进行最后的验证和准备。 此次测试使用约200辆经过特殊改装的Model 3车型,…...
C++面试复习(7)2025.4.25
1,说一说常用的 Linux 命令(NIUKE) 1,cat 查看文件内容 cat filename2,rm 删除 rm filename:删除文件。 rm -r directory:删除目录及其内容。 rm -f filename:强制删除文件(不询问确认&…...
使用 uv 工具快速创建 MCP 服务(Trae 配置并调用 MCP 服务)
文章目录 下载Traeuv 工具教程参考我的这篇文章创建 uv 项目main.pyTrae 配置 MCP 服务添加 MCP创建智能体 使用智能体调用 MCP 创建 demo 表查询 demo 表结构信息demo 表插入 2 条测试数据查询 demo 表中的数据 下载Trae https://www.trae.com.cn/ uv 工具教程参考我的这篇…...
07 Python 字符串全解析
文章目录 一. 字符串的定义二. 字符串的基本用法1. 访问字符串中的字符2. 字符串切片3. 字符串拼接4. 字符串重复5.字符串比较6.字符串成员运算 三. 字符串的常用方法1. len() 函数2. upper() 和 lower() 方法3. strip() 方法4. replace() 方法5. split() 方法 四. 字符串的进阶…...