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

Vue 3 实现转盘抽奖效果

news 来源：原创 2025/7/18 5:04:45

🎡 使用 Vue 3 实现转盘抽奖效果

在移动端或营销活动中，转盘抽奖是一种非常常见的互动方式。本文基于 Vue 3 + TypeScript 实现一个视觉炫酷、逻辑完整的转盘抽奖功能，并支持「指定奖品必中」的逻辑。

iShot_2025-05-12_11.31.27

🧰 技术栈

Vue 3 + Composition API
CSS3 动画（transform + transition）
响应式布局适配（vw）

✨ 功能特性

转盘顺滑旋转抽奖
奖品可配置（支持设置指定中奖项）
用户抽奖次数控制
动画完成后触发中奖提示
响应式适配设计稿

🧱 页面结构拆解

以 LandComponent.vue 为例，核心结构如下：

<!-- 顶部装饰图 -->
<div class="top-img" /><!-- 抽奖区域 -->
<div class="land"><img class="背景图1" /><img class="背景图2" /><!-- 转盘区域 --><div class="prize-list" ref="prizeWrap"><divclass="prize-item"v-for="(item, index) in prizeList":style="prizeStyle(index)"><p class="text" :class="index === 0 ? 'vertical-text' : ''">{{ item.name }}</p></div></div><!-- 抽奖按钮 --><div class="btn" @click="start" /><!-- 抽奖次数提示 --><div>Você ainda tem {{ drawsNum }} tentativa</div><!-- 点击领奖按钮 --><div class="receive-btn" @click="start">Clique para Ganhar</div>
</div>

🧮 奖品配置与位置布局

奖品列表

const prizeList = ref([{ name: 'Rec.100=200', type: 1 }, // 必中项{ name: '10R$ de Recarga' },{ name: 'Não Ganhou desta Vez' },{ name: '50R$ de Recarga' },{ name: '1R$ de Recarga' },{ name: '20R$ de Recarga' },{ name: 'Não Ganhou desta Vez' },
])

奖品在圆盘上的旋转角度

const priceDeg = 15 // 空出顶部角度
const rotateAngle = computed(() => (360 - priceDeg) / (prizeList.value.length - 1))

奖品布局样式

const prizeStyle = computed(() => {const angle = rotateAngle.valuereturn (i: number) => {return i === 0? `transform: rotate(51deg); ...` // 顶部中奖项: `transform: rotate(${angle * i + angle / 2 + 5}deg); ...`}
})

🎬 抽奖动画控制

旋转总角度计算

const baseRunAngle = ref(360 * 5)  // 5 需要转几圈
const totalRunAngle = computed(() => {return baseRunAngle.value + 360 - prizeId.value * rotateAngle.value - rotateAngle.value / 2 - 25
})

抽奖触发逻辑

const start = () => {if (!isRunning.value) {isRunning.value = trueprizeId.value = getRandomNum() // 决定中奖项startRun()}
}

设置旋转动画并监听结束

const startRun = () => {prizeWrap.value.style = `transform: rotate(${totalRunAngle.value}deg);transition: all 5s ease;`prizeWrap.value.addEventListener('transitionend', stopRun)
}

🎯 必中指定奖品逻辑

const getRandomNum = () => {return prizeList.value.findIndex(item => item.type === 1)
}

这段逻辑确保总是命中 type === 1 的奖品。

🛑 抽奖结束处理

const stopRun = () => {isRunning.value = falseprizeWrap.value.style = `transform: rotate(${${totalRunAngle.value - baseRunAngle.value}}deg)`setTimeout(() => {// 弹窗展示结果}, 1500)
}

📱 响应式适配

项目中使用设计稿宽度为 750px，通过以下函数将 px 转为 vw：

const pxToVw = (px: number) => (px / 750) * 100 + 'vw'

用于所有动态布局计算。

🎨 样式与动画

.prize-list {background: url('转盘背景图') no-repeat center/100% 100%;border-radius: 50%;
}
.btn {background: url('按钮图') no-repeat center/100% 100%;
}
.vertical-text {writing-mode: sideways-rl;text-orientation: upright;
}

✅ 总结

本文完整实现了一个移动端转盘抽奖功能，具备以下特点：

功能	说明
动画	使用 transform + transition 平滑旋转
奖品布局	等分角度 + 计算偏移
指定奖品必中	支持自定义中奖逻辑
转盘视觉高度还原	结合背景图和动画优化

📚 参考资料

Vue 3 Composition API
MDN transform
CSS 动画与旋转指南

Vue 3 实现转盘抽奖效果

🎡 使用 Vue 3 实现转盘抽奖效果在移动端或营销活动中，转盘抽奖是一种非常常见的互动方式。本文基于 Vue 3 TypeScript 实现一个视觉炫酷、逻辑完整的转盘抽奖功能，并支持「指定奖品必中」的逻辑。 iShot_2025-05-12_11.31.27 &#x1f9f…...

编程日记 2025/7/18 5:04:45

Python 处理图像并生成 JSONL 元数据文件 - 灵活text版本

Python 处理图像并生成 JSONL 元数据文件 - 灵活text版本 flyfish import os import json import argparse from PIL import Image from xpinyin import Pinyinclass ImageConverter:def __init__(self, src_folder, dest_folder, target_size1024, output_format"JPEG&…...

编程日记 2025/7/18 4:37:56

LeRobot 项目部署运行逻辑（七）—— ACT 在 Mobile ALOHA 训练与部署

全部流程为：硬件配置 -> 环境安装 -> 遥操作数据采集 -> 数据集可视化 -> 策略训练 -> 策略评估在之前的笔记中已经完成了绝大部分，最后再记录一下最后的训练部署，算是最简单的部分了目录 1 ACT 训练 2 ALOHA 部署 3 更…...

编程日记 2025/7/18 4:40:08

【NextPilot日志移植】ULog

📚 ULog 日志系统详解关键词：结构化日志、飞行数据记录、自描述格式、嵌入式系统、PX4、NextPilot 🧠 一、ULog 是什么？ ULog（Universal Log） 是 PX4/NextPilot 飞控系统中使用的结构化日志格式&#xff…...

编程日记 2025/7/18 4:40:06

扩展：React 项目执行 yarn eject 后的 scripts 目录结构详解

扩展：React 项目执行 yarn eject 后的 scripts 目录结构详解什么是 yarn eject？scripts 目录结构与说明各脚本说明说明什么是 yarn eject？ yarn eject 是 Create React App（简称 CRA）提供的一条命令，用于…...

编程日记 2025/7/18 4:59:14

Android11.0 framework第三方无源码APP读写断电后数据丢失问题解决

1.前言在11.0中rom定制化开发中，在某些产品开发中，在某些情况下在App用FileOutputStream读写完毕后，突然断电会出现写完的数据丢失的问题，接下来就需要分析下关于使用FileOutputStream读写数据的相关流程，来实现相关功能 2.framework第三方无源码APP读写断电后数据丢…...

编程日记 2025/7/18 4:41:15

多样本整合Banksy空间聚类分析(Visium HD, Xenium, CosMx)

在空间数据分析中，传统的单细胞聚类算法，例如Seurat和Scanpy中的lovain和leiden等聚类算法，通常在处理空间数据时忽略了空间信息。然而，由于细胞状态受其周围细胞的影响，将转录组数据与细胞的空间信息结合起来进行聚类…...

编程日记 2025/7/18 4:42:30

【2025最新】Vm虚拟机中直接使用Ubuntu 免安装过程直接使用教程与下载

Ubuntu 是一个基于 Debian 的自由开源 Linux 操作系统，面向桌面、服务器和云计算平台广泛应用。由英国公司 Canonical Ltd. 维护和发布，Ubuntu 强调易用性、安全性和稳定性，适合个人用户、开发者以及企业部署使用。 Ubuntu 默认使用 GNOME …...

编程日记 2025/7/18 4:43:55

【Leetcode】系列之206反转链表

反转链表题目描述解决思路过程示例代码示例结果展示总结题目描述给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。解决思路 next_node:临时存放当前指针指向下一个指针的变量；pre:存放空指针；curr&#xff1…...

编程日记 2025/7/18 4:37:58

图灵爬虫练习平台第十九题js逆向

题十九：法外狂徒该题适合JS逆向学习的小伙伴练习，模拟国内某大型网站数据加密设计，给大家练练手还是先f12看看是什么加密，发现是返回数据最后加密了还是先堆栈分析一下，直接点进去打上断点分析一下，…...

编程日记 2025/7/13 4:48:18

Ubuntu 22初始配置（root、ssh）

1.设置root密码并启用root用户 sudo passwd root sudo passwd -u root 2.安装ssh apt install openssh-server systemctl enable --now ssh 3.支持root通过ssh登录 vim /etc/ssh/sshd_config 是sshd_config(服务端) 不是ssh_config（客户端） 最后增加一…...

编程日记 2025/7/18 5:00:48

css3响应式布局

css3响应式布局响应式设计是现代网页开发的重要组成部分，它确保网页在不同的屏幕尺寸上都有良好的显示效果。在CSS中，实现响应式布局是一种常用的技术，旨在使网页能够根据用户的设备和屏幕尺寸自动调整其布局和样式。这种技术对于确保网站…...

编程日记 2025/7/14 19:19:29

【DeepSeek问答记录】请结合实例，讲解一下pytorch的DataLoader的使用方法

PyTorch的DataLoader是数据加载的核心工具，可高效处理批量数据、并行加载和自动打乱。以下是一个结合实例的分步讲解： 1. 基础使用流程 import torch from torch.utils.data import Dataset, DataLoader# 自定义数据集类（必须实现__len__和…...

编程日记 2025/7/17 22:00:59

Codeforces Round 1024 (Div. 2)(A-D)

题面链接：Dashboard - Codeforces Round 1024 (Div. 2) - Codeforces A. Dinner Time 思路一共n个数被分成n/p个区间，每个区间内的和是q，如果还有除构成区间外剩余的数那么就一定能构造，如果没有剩余就看所有区间的和是否等于…...

编程日记 2025/7/16 8:30:49

大语言模型强化学习双强：OpenRLHF与verl技术解析

引言随着大语言模型（LLM）参数规模突破千亿级，如何高效完成基于人类反馈的强化学习（RLHF）训练成为行业焦点。OpenRLHF与verl作为开源社区两大标杆框架，分别以Ray分布式架构和HybridFlow混合控制器为核心&a…...

编程日记 2025/7/18 5:00:55

ARM Cortex-M3内核详解

目录一、ARM Cortex-M3内核基本介绍 （一）基本介绍 （二）主要组成部分 （三）调试系统二、ARM Cortex-M3内核的内核架构三、ARM Cortex-M3内核的寄存器四、ARM Cortex-M3内核的存储结构五、ARM Co…...

编程日记 2025/7/17 17:18:31

关于高并发GIS数据处理的一点经验分享

1、背景介绍笔者过去几年在参与某个大型央企的项目开发过程中，遇到了十分棘手的难题。其与我们平常接触的项目性质完全不同。在一般的项目中，客户一般只要求我们能够通过桌面软件对原始数据进行加工处理，将各类地理信息数据加工处理成地图/场景和工作空间，然后再将工作空…...

编程日记 2025/7/17 12:10:09

vue3+flask+sqlite前后端项目实战

基础环境安装 pycharm 下载地址： https://www.jetbrains.com/zh-cn/pycharm/download/?sectionwindows vscode 下载地址 https://code.visualstudio.com/docs/?dvwin64user python 下载地址 https://www.python.org/downloads/windows/ Node.js（含npm…...

编程日记 2025/7/18 4:41:49

支付宝API-SKD-GO版

前言支付宝api的sdk没有提供go版，这里自己封装了一个go版的sdk，有需要的朋友可以自取使用支付宝 AliPay SDK for Go, 集成简单，功能完善，持续更新，支持公钥证书和普通公钥进行签名和验签。安装 go get github.c…...

编程日记 2025/7/17 19:12:04

uniapp(微信小程序)＞关于父子组件的样式传递问题(自定义组件样式穿透)

由于"微信小程序"存在【样式隔离机制】，且默认设置为isolated(启用样式隔离)，因此这里给出以下两种解决方案： 注意: 这2种方案父子组件<style>标签不能添加"scoped" 1.CSS变量穿透（推荐: 此方案不受样…...

编程日记 2025/7/18 5:00:48

AI时代还需要目视解译吗？——目视解译详解

在遥感技术迅猛发展的今天，尽管计算机自动解译算法层出不穷，目视解译仍然保持着其基础性和权威性的地位。作为遥感信息提取的"黄金标准"，目视解译凭借人类认知系统的独特优势，在多个专业领域持续发挥着不可替代的作用。…...

编程日记 2025/7/18 4:51:19

苹果电脑笔记本macos Mac安装mixly 米思齐软件详细指南

一、下载安装包二、安装 1、解压下载的文件，然后将解压后文件夹中的中文名称部分删掉只保留英文名称，例如：mixly2.0-mac 2、将mixly2.0-mac文件夹移动到当前用户的Documents路径下，注意路径中不要有中文。 3、进入mixly2.0-mac文…...

编程日记 2025/7/18 4:45:25

slackware系统详解

Slackware 是最古老的活跃维护的 Linux 发行版之一，由 Patrick Volkerding 于 1993 年创建。它以简洁性、稳定性和遵循 Unix 哲学为核心理念，适合追求高度控制和手动配置的用户。以下是 Slackware 的详细介绍： 1. 核心特点简洁性 (Simplici…...

编程日记 2025/7/17 9:48:43

力扣210（拓扑排序）

210. 课程表 II - 力扣（LeetCode） 这是一道拓扑排序的模板题。简单来说，给出一个有向图，把这个有向图转成线性的排序就叫拓扑排序。如果有向图中有环就没有办法进行拓扑排序了。因此，拓扑排序也是图论中判断有向无环图…...

编程日记 2025/7/18 4:42:28

Promise/A+ 规范中文解读

一、简介 Promise/A 是一个开放、健全且通用的JavaScript Promise标准，由开发者制定并供开发者参考。其核心目标是定义then方法的行为，确保不同Promise实现的互操作性。规范聚焦于异步操作的最终结果交互机制，而非Promise的创建、解决或拒绝…...

编程日记 2025/7/18 5:02:03

多媒体预研

主要包含h265 av1 等各种多媒体的具体应用 svac_plugin ZLMediaKit/ext-codec at master cyf88/ZLMediaKit D:\java\xiachu\otherzlm\ZLMediaKit> sip-client GB28181-Service/SipClient at master Washington-DC/GB28181-Service yolo Jackson-Tan/wvp_pro_yolo: 小…...

编程日记 2025/7/18 4:41:14

动态网站 LNMP

一、名词解释： LNMP： L : 代表 Linux 操作系统，为网站提供了可靠的运行环境N : 代表 Nginx，它是一款轻量级的高性能 Web 服务器，能够快速处理大量并发连接，有效提升网站的访问速度和性能 M : 代表…...

编程日记 2025/7/18 4:47:01

【Leetcode刷题随笔】349. 两个数组的交集

1. 题目描述给定两个数组nums1和nums2，返回它们的交集。输出结果中的每个元素一定是唯一的。我们可以不考虑输出结果的顺序。示例1: 输入:nums1 [1,2,2,1], nums2 [2,2] 输出：[2] 题目条件： 1 < nums1.length, nums2.length < 10…...

编程日记 2025/7/16 12:22:09

如何优雅的使用CMake中的FindPkgConfig模块

背景如果你遇到下面的场景，那么FindPkgConfig模块可以用来解决我们引用上游库的问题。上游库没有提供CMake的配置文件。CMake没有提供相应的查找模块，即Find<PackageName>.cmake的文件。上游库提供了pkg-config使用的.pc文件。如果上面三个条…...

编程日记 2025/7/15 14:58:03

Docker Volumes

Docker Volumes 是 Docker 提供的一种机制，用于持久化存储容器数据。与容器的生命周期不同，Volumes 可以独立存在，即使容器被删除，数据仍然保留。以下是关于 Docker Volumes 的详细说明： 1. 为什么需要 Volumes&#…...

编程日记 2025/7/17 16:47:43

[原创](现代Delphi 12指南):[macOS 64bit App开发]: 如何获取当前用户主目录(即:~波浪符号目录)?

[作者] 常用网名: 猪头三出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站编程生涯: 2001年~至今[共24年] 职业生涯: 22年开发语言: C/C++、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、开发工具: Visual Studio、Delphi、XCode、…...

编程日记 2025/7/13 20:47:38

day23 机器学习管道 Pipeline

在机器学习中，数据预处理、特征提取、模型训练和评估等步骤通常是按顺序执行的。为了更高效地管理和复用这些步骤，我们可以使用 Pipeline（管道）来构建一个完整的机器学习流水线。本文将详细介绍 Pipeline 的基础概念，并…...

编程日记 2025/7/15 20:06:43

The Graph：区块链数据索引的技术架构与创新实践

作为Web3生态的核心基础设施，The Graph通过去中心化索引协议重塑了链上数据访问的范式。其技术设计不仅解决了传统区块链数据查询的效率瓶颈，还通过经济模型与多链兼容性构建了一个开放的开发者生态。本文从技术角度解析其架构、机制及创新实践。一、技…...

编程日记 2025/7/17 13:27:41

nginx配置sse流传输问题：直到所有内容返回后才往下传输

一、禁用缓冲（如实时流传输）： location /stream {proxy_buffering off; } 二、开启分块传输 location /your-path {proxy_chunked_transfer_encoding on; # 显式启用分块传输（默认已启用） }...

编程日记 2025/6/29 4:11:06

使用Daemonset部署日志收集守护进程

1.DaemonSet简介： 在Kubernetes（简称k8s）中，DaemonSet是一种控制器，用于确保集群中的每个（或部分）节点运行一个指定的Pod副本。DaemonSet非常适合需要全局部署、节点级运行的服务，如…...

编程日记 2025/7/6 15:45:42

在Mac环境下搭建Docker环境的全攻略

在Mac环境下搭建Docker环境的全攻略在现代软件开发中，Docker已经成为不可或缺的工具之一。它不仅简化了应用的部署和管理，还极大地提升了开发效率。然而，在某些公司环境中，桌面版的Docker可能会被禁用，这给开发工作带…...

编程日记 2025/7/15 23:40:14

Go 语言 slice(切片) 的使用

序言在许多开发语言中，动态数组是必不可少的一个组成部分。在实际的开发中很少会使用到数组，因为对于数组的大小大多数情况下我们是不能事先就确定好的，所以他不够灵活。动态数组通过提供自动扩容的机制，极大地提升了开发效率。这…...

编程日记 2025/7/13 6:24:38

C++ string比较、string随机访问、string字符插入、string数据删除

string的字符串进行比较，代码见下。 #include<iostream>using namespace std;int main() {// 1 comparestring s1 "aab";string t11 "aab";int r11 s1.compare(t11);cout << "1: " << r11 << endl;strin…...

编程日记 2025/7/17 11:42:03

web 自动化之 Unittest 应用：测试报告装饰器断言

文章目录一、常见的第三方库结合 unittest 生产 html 格式测试报告1、HtmlTestRunner2、BeatifulReport 二、装饰器 unittest.skip 强制跳过&条件跳过三、unittest的常用断言方法一、常见的第三方库结合 unittest 生产 html 格式测试报告 1、HtmlTestRunner 官网下载 …...

编程日记 2025/7/15 15:20:09

前端基础之《Vue（16）—Vue脚手架介绍》

一、脚手架环境 1、推荐windows10 Node vue/cli(webpack) 2、测试node安装成功 node -v npm -v 3、什么是脚手架 Vue CLI：CLI就是脚手架的意思脚手架生成一套模板（入口文件、配置文件、目录结构） 4、常用的包管理器 npm：no…...

编程日记 2025/7/16 23:55:41

MySQL 事务（一）

文章目录 CURD不加控制，会有什么问题CURD满足什么属性，能解决上述问题？什么是事务为什么要有事务事务的版本支持了解事务的提交方式事务常见操作方式研究并发场景事务的正常操作事务的非正常情况的案例结论事务操作的注意事项 CURD不加控制&…...

编程日记 2025/7/14 23:13:03

Dsp38335利用Bootloader实现在线升级的技术原理

1. Bootloader概述 Bootloader（引导加载程序）是嵌入式系统中负责在设备启动时加载和启动主程序的代码。它通常在系统的闪存或其他非易失性存储器中，并在系统上电时首先执行。Bootloader不仅完成启动操作，还能够提供后续的程序升级…...

编程日记 2025/7/17 8:07:39

【TVM 教程】microTVM PyTorch 教程

Apache TVM 是一个深度的深度学习编译框架，适用于 CPU、GPU 和各种机器学习加速芯片。更多 TVM 中文文档可访问 →https://tvm.hyper.ai/ 作者：Mehrdad Hessar 该教程展示了如何使用 PyTorch 模型进行 microTVM 主机驱动的 AOT 编译。此教程可以在使用…...

编程日记 2025/7/15 8:34:18

利用D435i相机进行SLAM实现建图的关键环节-----Kalibr标定工具以及常见的问题调试

在SLAM系统中，相机标定是获取准确的空间信息和三维重建的关键步骤。对于Intel RealSense D435i这类双目相机，正确的内参和外参不仅能提高位姿估计精度，还能显著改善重建效果。本文将详细介绍如何使用Kalibr对D435i进行双目标定，并…...

编程日记 2025/7/14 22:28:45

old kali网站下载链接爬取-Kali linux 全部版本镜像下载--Index of /kali-images

Kali linux 全部版本镜像下载目的出于该网站不稳定原因，故爬取下载链接，以便网友下载老版本kali from bs4 import BeautifulSoup import requests from urllib.parse import urljoinbase_url "http://old.kali.org/kali-images/" visite…...

编程日记 2025/7/13 9:23:40

基于千眼狼高速摄像机与三色掩模的体三维粒子图像测速PIV技术

研究背景航空航天、能源动力领域，测量三维瞬态流场的速度场信息对于理解流体力学行为、优化系统设计非常关键。传统三维粒子图像测速技术如Tomo层析PIV，因依赖多相机阵列，存在系统体积、操作复杂，在封闭空间测量存在困难&#…...

编程日记 2025/7/13 6:53:09

Tauri(2.5.1)+Leptos(0.7.8)开发桌面应用--程序启动界面

前期使用Tauri(2.5.1)Leptos(0.7.8)写了一个自用桌面小程序，详见：使用Tauri 2.3.1Leptos 0.7.8开发桌面小程序汇总_tauri 小程序-CSDN博客。在此基础上，尝试给程序添加启动界面，效果如下图所示。 1. 添加启动画面设置在src-ta…...

编程日记 2025/7/15 16:20:54

Gmsh划分网格|四点矩形

先看下面这段官方自带脚本 /*********************************************************************** Gmsh tutorial 1** Variables, elementary entities (points, curves, surfaces), physical* entities (points, curves, surfaces)********************************…...

编程日记 2025/7/1 23:29:29

I/O多路复用(select/poll/epoll)

通过一个进程来维护多个Socket，也就是I/O多路复用，是一种常见的并发编程技术，它允许单个线程或进程同时监视多个输入/输出（I/O）流（例如网络连接、文件描述符）。当任何一个I/O流准备好进行读写操…...

编程日记 2025/7/17 21:26:15

一键生成达梦、Oracle、MySQL 数据库 ER 图！解锁高效数据库设计！

从事企业软件项目开发的同学们一定对 ER 图很熟悉，可以帮助用户快速厘清数据库结构，方便后续维护和优化。但是在日常工作中，面对复杂的数据结构，整理表设计文档对于每一位DBA来说都很头大，需要将设计细节转化为条理清晰…...

编程日记 2025/7/13 14:30:13