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

vue实现大转盘抽奖

news 来源：原创 2025/8/23 19:02:23

用vue实现一个简单的大转盘抽奖案例

大转盘

一转盘布局

<div class="lucky-wheel-content"><div class="lucky-wheel-prize" :style="wheelStyle" :class="isStart ? 'animated-icon' : ''"@transitionend="onWheelTransitionEnd"><div class="lucky-wheel-prize-item" v-for="(item, index) in prize" :key="item.id":style="{ transform: 'rotate(' + (index * 36) + 'deg)' }"><span>{{ item.reward }}</span><img :src="item.img" alt=""></div></div><div class="lucky-wheel-btn" @click="spinWheel">RODAR</div><img class="lucky-wheel-poiner" src="/img/activity/zphd_zz_s1.avif" /></div>

1.1 :style=“{ transform: ‘rotate(’ + (index * 36) + ‘deg)’ }”

v-for=“(item, index) in prize”：这表示你正在循环渲染 prize 数组中的每个项目，每个项目都有一个
item 和其在数组中的 index。这个 index 就是每个奖品项的位置。
index * 36：每个项目的旋转角度是基于其索引计算的。这里每个项目的旋转角度是 36 度（360 ÷ 10 = 36），因为假设转盘有 10 项。通过将 index 乘以 36，每个项目将被均匀地分布在转盘上。
:style=“{ transform: ‘rotate(’ + (index * 36) + ‘deg)’ }”：这段代码为每个
lucky-wheel-prize-item 动态添加一个内联的 style 属性，指定它的 transform CSS 样式。这个
transform 样式使用 rotate() 函数来旋转每个奖品项。
rotate(index * 36)：基于 index 计算出每个项目的旋转角度。比如：

对于第一个项目（index = 0），旋转角度是 0deg。
对于第二个项目（index = 1），旋转角度是 36deg。
对于第三个项目（index = 2），旋转角度是 72deg，以此类推。
效果：通过这种方式，每个 lucky-wheel-prize-item 将会根据它在转盘上的位置进行旋转，使它们均匀分布在 360 度的转盘上。这样，整个转盘就呈现出一个环形布局，每个项按顺序排列。

在这里插入图片描述

计算转盘旋转的样式

通过计算属性

const wheelStyle = computed(() => {return {transform: `rotate(${rotationAngle.value}deg)`,}
});

rotationAngle 是某个响应式变量（可能是通过其他逻辑计算出来的旋转角度），它的值决定了转盘旋转的角度。
当 rotationAngle.value 发生变化时，computed 属性会自动重新计算并返回新的样式对象，其中
rotate(${rotationAngle.value}deg) 的角度会根据最新的 rotationAngle.value 动态更新。
然后，这个 wheelStyle 对象可以应用到某个 DOM 元素上，通常是一个转盘的 style 属性，以便旋转转盘。

<div :style="wheelStyle"><!-- 转盘内容 -->
</div>

二转盘逻辑

2.1 这里最重要的是转盘总的旋转角度的设置

  spins.value += 5;  // 开始的旋转圈数// 后端返回中奖项的逻辑  随机数winningIndex.value = Math.floor(Math.random() * totalItems.value);console.log("中奖项:" + winningIndex.value);const anglePerItem = 360 / totalItems.value;let randomAngle = 360 - (winningIndex.value * anglePerItem); // 计算旋转到中奖的那一项let totalAngle = spins.value * 360 + randomAngle; // 总的旋转角度console.log("总的旋转角度:" + totalAngle);// 设置旋转角度rotationAngle.value = totalAngle;

let randomAngle = 360 - (winningIndex.value * anglePerItem);
randomAngle 是根据中奖项索引计算出的角度。winningIndex.value 乘以 anglePerItem 得到当前中奖项相对于起始位置的角度，360 - … 计算出从当前起始位置到中奖项的逆时针旋转角度。

在这里插入图片描述

2.2 在请求后端获取数据时，保持转动效果

:class=“isStart ? ‘animated-icon’ : ‘’”
主要是通过加上这个类名来保持这个效果

  spins.value += 5;isStart.value = trueapi.getRandom().then(res => {console.log(res);isStart.value = falsewinningIndex.value = res.data// 每个奖品的角度const anglePerItem = 360 / totalItems.value;// 计算中奖项的角度let randomAngle = 360 - (winningIndex.value * anglePerItem);let totalAngle = spins.value * 360 + randomAngle; // 总的旋转角度// 设置旋转角度rotationAngle.value = totalAngle;}).finally(() => {console.log('中奖项是:' + prize[winningIndex.value].reward);isSpinning.value = falseisStart.value = false})

api.getRandom()这个是我本地java写的一个接口，模拟返回一个中奖的索引，同时该接口延迟5s返回数据

   @GetMapping("/random")public Result<Integer> getRandom(){try {// 延迟5秒Thread.sleep(5000);} catch (InterruptedException e) {// 处理异常e.printStackTrace();}Random random = new Random();Integer integer = random.nextInt(10); // 生成0到10之间的随机整数return Result.success(integer); // 返回成功结果}

大转盘1

三完整代码

 <div class="lucky-wheel-content"><div class="lucky-wheel-prize" :style="wheelStyle" :class="isStart ? 'animated-icon' : ''"@transitionend="onWheelTransitionEnd"><div class="lucky-wheel-prize-item" v-for="(item, index) in prize" :key="item.id":style="{ transform: 'rotate(' + (index * 36) + 'deg)' }"><span>{{ item.reward }}</span><img :src="item.img" alt=""></div></div><div class="lucky-wheel-btn" @click="spinWheel">RODAR</div><img class="lucky-wheel-poiner" src="/img/activity/zphd_zz_s1.avif" /></div>

const prize = [{id: 1,reward: '0,05',img: '/img/activity/img_zphdjp_s1.png'}, {id: 2,reward: '1,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 3,reward: '2,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 4,reward: '3,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 5,reward: '4,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 6,reward: '5,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 7,reward: '15,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 8,reward: '25,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 9,reward: '35,00',img: '/img/activity/img_zphdjp_s1.png'}, {id: 10,reward: '75,00',img: '/img/activity/img_zphdjp_s1.png'}
]
const totalItems = ref(prize.length); // 总共有多少个项
const winningIndex = ref(0); // 假设中奖项的索引（从0开始）
const rotationAngle = ref(0); // 当前旋转角度
const isSpinning = ref(false)
const spins = ref(0) //转盘转5圈
const winner = ref(null); // 中奖项
const number = ref(0)  //记录抽奖次数
const isFirst = ref(0)
const isStart = ref(false)
// 计算转盘旋转的样式
const wheelStyle = computed(() => {return {transform: `rotate(${rotationAngle.value}deg)`,}});// 执行旋转转盘的操作
const spinWheel = () => {if (isSpinning.value) {return}number.value++;isStart.value = trueconsole.log("当前抽奖次数:" + number.value);isSpinning.value = true; // 开始旋转winner.value = null; // 重置中奖项winningIndex.value = 0; // 重置中奖索引rotationAngle.value = 0; // 重置旋转角度spins.value += 5;// api.getRandom().then(res => {//   console.log(res);//     isStart.value = false//   winningIndex.value = res.data//   // 每个奖品的角度//   const anglePerItem = 360 / totalItems.value;//   // 计算中奖项的角度//   let randomAngle = 360 - (winningIndex.value * anglePerItem);//   let totalAngle = spins.value * 360 + randomAngle; // 总的旋转角度//   // 设置旋转角度//   rotationAngle.value = totalAngle;// }).finally(()=>{//   // console.log('中奖项是:'+prize[winningIndex.value].reward );//   isSpinning.value=false// })// 后端返回中奖项的逻辑  随机数winningIndex.value = Math.floor(Math.random() * totalItems.value);// 假设每次转盘转5圈// spins.value += 5;setTimeout(()=>{isStart.value = falseisSpinning.value=falseconsole.log('中奖项是:'+prize[winningIndex.value].reward );},2000)// 每个奖品的角度const anglePerItem = 360 / totalItems.value;// 计算中奖项的角度let randomAngle = 360 - (winningIndex.value * anglePerItem);let totalAngle = spins.value * 360 + randomAngle; // 总的旋转角度// 设置旋转角度rotationAngle.value = totalAngle;
};// 监听转盘动画结束事件
const onWheelTransitionEnd = () => {isSpinning.value = false; // 旋转结束// rotationAngle.value=0winner.value = winningIndex.value; // 显示中奖项// console.log(winner.value, '123');// console.log(rotationAngle.value, '旋转角度');console.log('中奖项是:'+prize[winner.value].reward );};

.lucky-wheel {.lucky-wheel-content {width: 15rem;height: 15rem;background-image: url('/img/activity/zphd_bj_s1.avif');background-size: 100% 100%;margin: .4rem auto .4rem auto;position: relative;transition: transform 5s ease-in-out;.lucky-wheel-prize {position: absolute;top: 0;right: 0;bottom: 0;left: 0;transition: transform 4s ease-out;/* 控制旋转动画 */.lucky-wheel-prize-item {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 10;width: 2rem;margin: auto;height: 100%;color: #ffff;font-size: .22rem;text-align: center;display: flex;align-items: center;flex-direction: column;&>img {width: 2rem;height: 2rem;}&>span {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: .6rem;word-break: break-all;height: 2.8rem;line-height: 2.8rem;}}}@keyframes spin {0% {transform: rotate(0deg);/* 开始时从0度 */}100% {transform: rotate(360deg);/* 结束时旋转一圈 */}}/* 应用动画 */.animated-icon {display: inline-block;animation: spin 1s linear infinite;/* 1秒旋转一圈，永远循环 */}

vue实现大转盘抽奖

用vue实现一个简单的大转盘抽奖案例大转盘一转盘布局 <div class"lucky-wheel-content"><div class"lucky-wheel-prize" :style"wheelStyle" :class"isStart ? animated-icon : "transitionend"onWheelTransitionE…...

编程日记 2025/8/23 19:02:23

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第二篇:项目创建和初始化

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录《从零搭建Vue3项目实战》（AI辅助…...

编程日记 2025/8/18 0:42:58

yum拒绝连接

YUM 拒绝连接的解决方案当遇到 yum 无法连接的问题时，通常可以通过更换为更稳定的镜像源来解决问题。以下是具体的解决方法： 更换为阿里云源如果当前的 yum 配置文件存在问题或网络不稳定，可以尝试将其替换为阿里云的镜像源。备份原始配…...

编程日记 2025/8/19 9:03:29

信息学奥赛一本通 1861：【10NOIP提高组】关押罪犯 | 洛谷 P1525 [NOIP 2010 提高组] 关押罪犯

【题目链接】 ybt 1861：【10NOIP提高组】关押罪犯洛谷 P1525 [NOIP 2010 提高组] 关押罪犯【题目考点】 1. 图论：二分图 2. 二分答案 3. 种类并查集【解题思路】解法1：种类并查集一个囚犯是一个顶点，一个囚犯对可以看…...

编程日记 2025/8/18 0:15:12

代码随想录算法训练营第十一天

LeetCode/卡码网题目: 144. 二叉树的前序遍历94. 二叉树的中序遍历145. 二叉树的后序遍历102. 二叉树的层序遍历107.二叉树的层次遍历II199. 二叉树的右视图637. 二叉树的层平均值429. N 叉树的层序遍历515. 在每个树行中找最大值116. 填充每个节点的下一个右侧节点指针117. 填…...

编程日记 2025/8/23 15:30:20

浅谈进程的就绪状态与挂起状态

就绪状态进程获得除 CPU 之外的所需资源，一旦得到 CPU 就可以立即运行，不能运行的原因是还是因为 CPU 的资源太少，只能等待分配 CPU 资源。在系统中，处于就绪状态的进程可能有多个，通常是将它们组成一个进程就绪队列…...

编程日记 2025/8/23 19:02:21

37、web前端开发之Vue3保姆教程(一)

一、课程简介本课程旨在帮助学员从零基础逐步掌握Web前端开发的核心技术，涵盖当前前端开发中的关键工具和框架。课程内容包括： Vue 3：主流前端框架，支持组件化开发和响应式数据管理，帮助学员高效构建现代Web应用。TypeScript：增强版JavaScript，提供静态类型支持，提高…...

编程日记 2025/8/21 2:41:36

cenos7升级gcc 9.3和Qt5.15版本教程

cenos7升级gcc 9.3和Qt5.15版本教程文章目录 cenos7升级gcc 9.3和Qt5.15版本教程0、背景1、现状2、目标和思路3、升级前环境准备3.1 虚拟机联网配置3.2 镜像设置 4、升级gcc 9.35 升级Qt6 测试验证7 总结 0、背景之前编码的环境一直是“拿来主义”，拷贝现成的虚拟…...

编程日记 2025/8/17 22:15:57

Scala总结(七)

集合（二） 数组不可变数组与可变数组的转换 arr1.toBuffer //不可变数组转可变数组 arr2.toArray //可变数组转不可变数组 arr2.toArray 返回结果才是一个不可变数组，arr2 本身没有变化arr1.toBuffer 返回结果才是一个可变数组&#xff…...

编程日记 2025/8/21 2:41:21

linux 使用 usermod 授权普通用户属组权限

之前写过这篇文章 linux 普通用户使用 docker 只不过是使用 root 用户编辑 /etc/group用户所属组文件的方式今天带来一种 usermod 命令行方式以下3步，在root用户下操作第一步，先创建一个普通用户测试使用 useradd miniuser第二步，授权到…...

编程日记 2025/8/23 19:02:20

Redis持久化

Redis持久化一.认识持久化1.简单介绍2.持久化策略二.RDB1.快照2."定期"fork 3.RDB演示(1)手动执行save&bgsave触发一次生成快照(2)插入key，不手动执行bgsave(3)执行bgsave后，新旧文件的替换(4)通过配置自动生成rdb快照(5)rdb文件内容被故…...

编程日记 2025/8/23 18:59:53

什么是 k8s 的 Taints（污点）和 Tolerations（容忍度）

什么是 k8s 的 Taints（污点） 和 Tolerations（容忍度） 在 Kubernetes（K8s）中，Taints（污点）和 Tolerations（容忍度）用于影响 Pod 调度到节点的行为…...

编程日记 2025/8/23 19:02:20

是德科技KEYSIGHT校准件85039B

是德科技KEYSIGHT校准件85039B 是德科技KEYSIGHT校准件85039B 85039B Agilent | 85039B|校准件|网络分析仪校准件|3GHz|75欧|N型品牌： 安捷伦 | Agilent | 惠普 | HP 主要技术指标 DC to 3GHz frequency range 主要描述常用型号： 一、频谱分析仪或…...

编程日记 2025/8/22 23:02:55

以UE5第三方插件库为基础，编写自己的第三方库插件，并且能够在运行时复制.dll

首先，创建一个空白的C 项目，创建第三方插件库。如下图所示编译自己的.Dll 和.lib 库，打开.sln 如下图 ExampleLibrary.h 的代码如下 #if defined _WIN32 || defined _WIN64 #define EXAMPLELIBRARY_IMPORT __declspec(dllimport) #elif d…...

编程日记 2025/8/23 18:59:55

StarRocks执行原理与SQL性能优化策略探索

https://zhuanlan.zhihu.com/p/15707561363 聚合优化实践 -- 通过count group by 优化 count distinct数据倾斜问题除了前面所说的聚合度会对分组聚合造成比较大的影响外，我们还要考虑一个点，即数据倾斜问题。背景: 如下为最初的用户计算uv的SQL SE…...

编程日记 2025/8/22 20:42:11

Java全栈面试宝典：JMM内存模型与Spring自动装配深度解析

目录一、Java内存模型（JMM）核心原理 🔥 问题8：happens-before原则全景解析 JMM内存架构图 happens-before八大规则线程安全验证案例 🔥 问题9：JMM解决可见性的三大武器可见性保障机制 volatile双…...

编程日记 2025/8/23 18:57:32

拉普拉斯变换

【硬核】工科生都逃不掉的拉氏变换，居然又炫酷又实用|拉普拉斯变换原理、图解与应用，傅里叶变换进阶，控制理论必修课【喵星考拉】...

编程日记 2025/8/21 7:24:47

JavaScript之Json数据格式

介绍 JavaScript Object Notation， js对象标注法，是轻量级的数据交换格式完全独立于编程语言文本字符集必须用UTF-8格式，必须用“”任何支持的数据类型都可以用JSON表示JS内内置JSON解析JSON本质就是字符串 Json对象和JS对象互相转化前端…...

编程日记 2025/8/20 15:54:18

Android WiFi协议之P2P介绍与实践

Android WiFi P2P WiFi P2P (Peer-to-Peer) 是 Android 提供的一种允许设备之间直接通过 WiFi 进行通信的技术，无需接入传统的 WiFi 网络或互联网。这种技术也被称为 WiFi Direct。一、WiFi P2P 基本概念 1. 核心组件 P2P 设备：支持 WiFi P2P 的 And…...

编程日记 2025/8/21 17:16:01

android TabLayout中tabBackground和background的区别

在这段代码中，android:background"color/white" 和 app:tabBackground"android:color/transparent" 是两个不同的属性，它们的作用范围和用途完全不同。以下是它们的区别： 1. android:background 作用： 设置整…...

编程日记 2025/8/21 17:16:35

使用 `keytool` 生成 SSL 证书密钥库

使用 keytool 生成 SSL 证书密钥库：详细指南在现代 Web 应用开发中，启用 HTTPS 是保护数据传输安全性和增强用户体验的重要步骤。对于基于 Java 的应用，如 Spring Boot 项目，keytool 是一个强大的工具，用于生成和管理…...

编程日记 2025/8/20 4:18:58

DC-DC电路和LDO电路

一、DC-DC电路在电子电路中，将输入的直流电压转换为电路中所需要的直流电压的电路被称为DC-DC电源电路。 1、buck电路（降压电路） 功能：把12V输入电压转化为5V的输出电压。上图中电池为12V供电，需要给负载输出5V电…...

编程日记 2025/8/20 4:11:16

智谛达科技引领AI人形机器人新时代

在这个科技日新月异的时代,人工智能(AI)如同一股不可阻挡的洪流,以前所未有的速度改变着我们的生活方式、工作模式乃至整个社会的运行逻辑。而在这场波澜壮阔的科技革命中,智谛达科技集团凭借其深厚的技术底蕴、前瞻性的战略眼光以及在AI人形机器人领域的深厚积累,正引领着整个…...

编程日记 2025/8/20 8:05:11

在ubuntu24上装ubuntu22

实验室上有一台只装了ubuntu24的电脑，但是项目要求在22上进行搞两个ubuntu系统！ 步骤一：制作22的启动盘步骤二：进入bios安装界面步骤三：选择try or install ubuntu 步骤四：选择try ubuntu 步骤五&…...

编程日记 2025/8/20 1:24:11

高精度算法

高精度加法输入两个数，输出他们的和（高精度） 输入样例 111111111111111111111111111111 222222222222222222222222222222 输出样例 333333333333333333333333333333 #include <bits/stdc.h> using namespace std;string a,b; in…...

编程日记 2025/8/20 11:30:29

2019年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2019年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/22 19:07:47

UIMeter-UI自动化软件(产品级)

前言：作为一个资深测试工程师，UI测试，webUI自动化测试是我们必备的技能，我们都知道常用的框架比如selenium、playwright、rebootframwork等等，但是无论哪一种框架，都需要测试人员去编写代码，进行…...

编程日记 2025/8/23 16:59:42

Porting Layer - 跨平台函数接口封装（RTOS/Windows）- C语言

目录概述具体实现使用说明概述在嵌入式开发中，一般会在某个开发板上某个系统上实现某个功能，为了开发模块的移植性更好，因此需要对不同的操作系统有一层封装层。当换一个操作系统时，模块中的code不用修改，只需要根…...

编程日记 2025/8/17 23:16:29

Kafka负载均衡挑战解决

本文为 How We Solve Load Balancing Challenges in Apache Kafka 阅读笔记 kafka通过利用分区来在多个队列中分配消息来实现并行性。然而每条消息都有不同的处理负载，也具有不同的消费速率，这样就有可能负载不均衡，从而使得瓶颈、延迟问题和…...

编程日记 2025/8/23 11:30:20

Docker Compose 常用命令运行 docker-compose.yaml

Docker Compose 中有两个重要的概念服务 (service)：一个应用的容器，实际上可以包括若干运行相同镜像的容器实例。项目 (project)：由一组关联的应用容器组成的一个完整业务单元，在 docker-compose.yml 文件中定义。为了更方便…...

编程日记 2025/8/22 18:27:48

Kafka的索引设计有什么亮点

想获取更多高质量的Java技术文章？欢迎访问Java技术小馆官网，持续更新优质内容，助力技术成长 Java技术小馆官网https://www.yuque.com/jtostring Kafka的索引设计有什么亮点？ Kafka 之所以能在海量数据的传输和处理过程中保持高…...

编程日记 2025/8/20 23:38:32

基于大模型的病态窦房结综合征预测及治疗方案研究报告

目录一、引言 1.1 研究背景与目的 1.2 研究意义二、病态窦房结综合征概述 2.1 定义与病因 2.2 临床表现与分型 2.3 诊断方法三、大模型在病态窦房结综合征预测中的应用 3.1 大模型介绍 3.2 数据收集与预处理 3.3 模型训练与优化四、术前预测与准备 4.1 风险预…...

编程日记 2025/8/23 14:13:00

音视频入门基础：RTCP专题（5）——《RFC 3550》的附录A

一、引言本文对应《RFC 3550》的附录A（Appendix A. Algorithms）。二、Appendix A. Algorithms 根据《RFC 3550》第62页，《RFC 3550》提供了有关RTP发送方和接收方算法的C代码示例。在特定的运行环境下，可能还有其他更快或更有…...

编程日记 2025/8/17 22:15:23

qemu仿真调试esp32，以及安装版和vscode版配置区别

不得不说，乐鑫在官网的qemu介绍真的藏得很深首先在首页的sdk的esp-idf页面里找找然后页面拉倒最下面入门指南我这里选择esp32-s3 再点击api指南-》工具才会看到qemu的介绍 QEMU 模拟器 - ESP32-C3 - — ESP-IDF 编程指南 latest 文档https://docs.espressi…...

编程日记 2025/8/21 5:33:35

协方差相关问题

为什么无偏估计用 ( n − 1 ) (n-1) (n−1) 而不是 n n n，区别是什么？ 在统计学中，无偏估计是指估计量的期望值等于总体参数的真实值。当我们用样本数据估计总体方差或协方差时，分母使用 ( n − 1 ) (n-1) (n−1) 而不是 n n…...

编程日记 2025/8/22 8:29:14

Android OpenCV 人脸识别识别人脸框识别人脸控件自定义

先看效果 1.下载OpenCV 官网地址：opcv官网找到Android 4.10.0版本下载下载完毕解压zip如图： 2.将OpenCV-android_sdk导入项目我这里用的最新版的Android studio 如果是java开发需要添加kotlin的支持。我用的studio比较新可以参考下，如果…...

编程日记 2025/8/20 13:10:51

深入解析Linux软硬链接：原理、区别与应用实践

Linux系列文章目录 Linux系列前言一、软硬链接的概念引入1.1 硬链接1.2 软链接二、软硬链接的使用场景2.1 软链接2.2 硬链接三、总结前言上篇文章我们详细的介绍了文件系统的概念及底层实现原理，本篇我们就在此基础上探讨Linux系统中文件的软链接&#xff0…...

编程日记 2025/8/20 17:07:15

TDengine 与 taosAdapter 的结合（二）

五、开发实战步骤 （一）环境搭建在开始 TDengine 与 taosAdapter 结合的 RESTful 接口开发之前，需要先完成相关环境的搭建，包括 TDengine 和 taosAdapter 的安装与配置，以及相关依赖的安装。 TDengine 安装&#xf…...

编程日记 2025/8/22 2:28:04

OBS 中如何设置固定码率（CBR）与可变码率（VBR）？

在使用 OBS 进行录制或推流时，设置“码率控制模式”（Rate Control）是非常重要的一步。常见的控制模式包括： CBR（固定码率）：保持恒定的输出码率，适合直播场景。 VBR（可变码率）：在允许的范围内动态调整码率，适合本地录制、追求画质。一、CBR vs. VBR 的差异项目CBR…...

编程日记 2025/8/17 23:53:35

优艾智合人形机器人“巡霄”，开启具身多模态新时代

近日，优艾智合-西安交大具身智能机器人研究院公布人形机器人矩阵，其中轮式人形机器人“巡霄”首次亮相。 “巡霄”集成移动导航、操作控制与智能交互技术，具备跨场景泛化能，适用于家庭日常服务、电力设备巡检、半导体精密操作及仓…...

编程日记 2025/8/21 8:29:42

蓝桥杯小白打卡第七天（第十四届真题）

小蓝的金属冶炼转换率问题小蓝有一个神奇的炉子用于将普通金属 (O) 冶炼成为一种特殊金属 (X) 。这个炉子有一个称作转换率的属性 (V) ，(V) 是一个正整数，这意味着消耗 (V) 个普通金属 (O) 恰好可以冶炼出一个特殊金属 (X) ，当普通金属 (…...

编程日记 2025/8/23 15:55:54

excel经验

Q:我现在有一个excel，有一列数据，大概两千多行。如何在这一列中筛选出具有关键字的内容，并输出到另外一列中。 A: 假设数据在A列（A1开始），关键字为“ABC”在相邻空白列（如B1）输入公…...

编程日记 2025/8/20 23:05:50

【Pandas】pandas DataFrame astype

Pandas2.2 DataFrame Conversion 方法描述DataFrame.astype(dtype[, copy, errors])用于将 DataFrame 中的数据转换为指定的数据类型 pandas.DataFrame.astype pandas.DataFrame.astype 是一个方法，用于将 DataFrame 中的数据转换为指定的数据类型。这个方法非常…...

编程日记 2025/8/19 5:03:25

【Netty4核心原理④】【简单实现 Tomcat 和 RPC框架功能】

文章目录一、前言二、基于 Netty 实现 Tomcat1. 基于传统 IO 重构 Tomcat1.1 创建 MyRequest 和 MyReponse 对象1.2 构建一个基础的 Servlet1.3 创建用户业务代码1.4 完成web.properties 配置1.5 创建 Tomcat 启动类 2. 基于 Netty 重构 Tomcat2.1 创建 NettyRequest和 Netty…...

编程日记 2025/8/20 4:22:14

4.6学习总结

包装类包装类：基本数据类型对应的引用数据类型 JDK5以后新增了自动装箱，自动拆箱以后获取包装类方法，不需要new，直接调用方法，直接赋值即可 //1.把整数转成二进制，十六进制 String str1 Integer.toBin…...

编程日记 2025/8/20 7:21:58

MySQL学习笔记五

第七章数据过滤 7.1组合WHERE子句 7.1.1AND操作符输入： SELECT first_name, last_name, salary FROM employees WHERE salary < 4800 AND department_id 60; 输出： 说明：MySQL允许使用多个WHERE子句，可以以AND子句或OR…...

编程日记 2025/8/21 23:35:06

成为社交场的导演而非演员

一、情绪的本质：社交信号而非自我牢笼进化功能：情绪是人类进化出的原始社交工具。愤怒触发群体保护机制，悲伤唤起同情支持，喜悦巩固联盟关系。它们如同可见光谱，快速传递生存需求信号。双刃剑效应：情绪的…...

编程日记 2025/8/23 9:57:20

怎么使用vue3实现一个优雅的不定高虚拟列表

前言很多同学将虚拟列表当做亮点写在简历上面，但是却不知道如何手写，那么这个就不是加分项而是减分项了。实际项目中更多的是不定高虚拟列表，这篇文章来教你不定高如何实现。什么是不定高虚拟列表不定高的意思很简单，就是不…...

编程日记 2025/8/23 6:20:31

LemonSqueezy: 1靶场渗透

LemonSqueezy: 1 来自 <LemonSqueezy: 1 ~ VulnHub> 1，将两台虚拟机网络连接都改为NAT模式 2，攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182，靶场IP192.168.23.225 3，对靶机进…...

编程日记 2025/8/22 5:57:40

2025 年山东保安员职业资格考试要点梳理

山东作为人口大省，保安市场规模庞大。2025 年考试报考条件常规。报名通过山东省各市公安机关指定的培训机构或政务服务窗口，提交资料与其他地区类似。理论考试注重对山东地域文化特色相关安保知识的考查，如在孔庙等文化圣地安保中&#x…...

编程日记 2025/8/17 22:12:08

一 转盘布局