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

用 HTML、CSS 和 JavaScript 实现抽奖转盘效果

news 来源：原创 2025/5/18 7:13:47

顺序抽奖

前言

这段代码实现了一个简单的抽奖转盘效果。页面上有一个九宫格布局的抽奖区域，周围八个格子分别放置了不同的奖品名称，中间是一个 “开始抽奖” 的按钮。点击按钮后，抽奖区域的格子会快速滚动，颜色不断变化，模拟抽奖过程。经过一定圈数的滚动后，会随机停止在某一个格子上，弹出提示框显示中奖奖品。

效果展示

代码详情

HTML部分

<div class="box"><div class="div1">电脑</div><div class="div2">手机</div><div class="div3">音响</div><div class="div4">冰箱</div><div class="div5">空调</div><div class="div6">衣柜</div><div class="div7">沙发</div><div class="div8">地毯</div><button class="giftButton">开始抽奖</button>
</div>

CSS部分

* {margin: 0;padding: 0;
}.box {background-color: lightgray;width: 340px;height: 340px;position: relative;
}.box div {background-color: cadetblue;width: 100px;height: 100px;text-align: center;line-height: 100px;
}.div1 {position: absolute;top: 10px;left: 10px;
}/* 其他 .divX 类的样式省略，它们类似地设置了不同的 top 和 left 值来定位 */.giftButton {position: absolute;width: 100px;height: 100px;top: 120px;left: 120px;border-radius: 10px;background-color: navajowhite;
}

JS部分

初始化声明

boxCenter：通过 document.getElementsByClassName('box')[0] 获取到类名为 box 的元素，这个元素是整个抽奖区域的容器。
allGift：使用 boxCenter.getElementsByTagName('div') 获取 boxCenter 内的所有 div 元素，这些 div 元素代表了各个奖品格子。
giftButtons：通过 document.getElementsByClassName('giftButton')[0] 获取 “开始抽奖” 按钮元素，后续会为它添加点击事件。
k：作为奖品的下标，用于标记当前高亮显示的奖品格子。
time：旋转时间间隔，初始值为 500 毫秒，后续会根据抽奖过程动态调整。
count：记录抽奖过程中转过的圈数，初始值为 0。
inter：用于存储定时器，方便后续清除和重新设置定时器。
random：存储随机生成的中奖下标，初始值为 0。

//获取box
let boxCenter = document.getElementsByClassName('box')[0];
//获取boxcenter里的所有的div元素
let allGift = boxCenter.getElementsByTagName('div');
//获取到抽奖按钮,后续帮点击事件
let giftButtons = document.getElementsByClassName('giftButton')[0];
//充当奖品的下标
let k = 0;
// 旋转时间间隔
let time = 500;
//圈数，就是转动的圈数
let count = 0;
//存定时器的
let inter;
//随机的数（中奖的下标）
let random = 0;

点击按钮事件

为 giftButtons 按钮添加 onclick 事件处理函数。
当点击按钮时，将当前 k 对应的奖品格子背景颜色设置为黄色，表示高亮显示。
使用 Math.random() 生成一个 0 到 1 之间的随机数，乘以 allGift.length 得到一个随机范围在 0 到奖品数量之间的数，再使用 Math.floor() 向下取整，得到一个随机的中奖下标 random。
使用 setInterval() 函数设置一个定时器，每隔 time 毫秒执行一次 autoScroll 函数，开始抽奖滚动过程。

//上点击事件
giftButtons.onclick = function() {//奖品的下标k变颜色 allGift[k].style.backgroundColor = 'yellow';// 先生成一个随机数，然后*box里的所有div的数量,再向下取整random = Math.floor(Math.random() * allGift.length);//设定时器inter = setInterval(autoScroll, time);
}

滚动函数

奖品格子切换：
- 如果 k 小于 allGift.length - 1，说明还没有转到最后一个奖品格子，将 k 加 1，把上一个奖品格子的背景颜色变回 cadetblue，当前 k 对应的格子背景颜色设置为黄色。
- 如果 k 等于或大于 allGift.length - 1，说明转到了最后一个奖品格子，将 k 重置为 0，代表开始下一圈，同时圈数 count 加 1，把上一圈最后一个奖品格子的背景颜色变回 cadetblue，当前 k 对应的格子背景颜色设置为黄色。
滚动速度调整：
- 当圈数 count 小于 3 时，每次将 time 减去 100 毫秒，让滚动速度变快，但最快不超过 100 毫秒。
- 当圈数 count 大于等于 3 时，每次将 time 加上 100 毫秒，让滚动速度变慢，但最慢不超过 300 毫秒。
中奖判断与处理：
- 先使用 clearInterval(inter) 清除当前的定时器。
- 如果随机生成的中奖下标 random 等于当前的 k 且圈数 count 大于 4，说明抽奖停止，弹出提示框显示中奖的奖品名称。
- 否则，重新设置定时器，继续滚动，直到满足中奖条件。

function autoScroll() {//k小于长度 代表转到最后一个元素了   if (k < allGift.length - 1) {k++;//上一个奖品变回原色allGift[k - 1].style.backgroundColor = 'cadetblue';//当前索引下标变红allGift[k].style.backgroundColor = 'yellow';//k比长度长的话代表该转第二圈了} else {//重新让k=0下标， 下一次循环k = 0;//该转下一圈的话，圈数+1count++;//上一圈的最后一个奖品变回原色allGift[allGift.length - 1].style.backgroundColor = 'cadetblue';//当前索引下标变红allGift[k].style.backgroundColor = 'yellow';}if (count < 3) {//圈数小于5 ，每次都-100 让他变快变快time -= 100;//限制条件：最快滚动就是0.2秒if (time < 100) {time = 100;}//最外面的否则。就是圈数大于} else {//让他变慢time += 100;//限制条件：最慢就是2秒滚动一次if (time > 300) {time = 300;}}//判断中奖的是啥 和 确认转的圈数clearInterval(inter);if (random == k && count > 4) {//提示用户alert('🎉恭喜你,中奖的是🎉:' + '👉👉' + allGift[k].innerHTML + '👈👈');} else {//清除定时器//在设置一个定时器9inter = setInterval(autoScroll, time);}
}

随机抽奖

随机抽奖即为滚动的格子为随机的。

代码总览

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>抽奖页面</title><style>/* 全局样式重置 */* {margin: 0;padding: 0;}/* 抽奖容器样式 */.box {background-color: lightgray;width: 340px;height: 340px;position: relative;}/* 奖品方块样式 */.box div {background-color: cadetblue;width: 100px;height: 100px;text-align: center;line-height: 100px;}/* 各个奖品方块定位样式 */.div1 {position: absolute;top: 10px;left: 10px;}.div2 {position: absolute;top: 10px;left: 120px;}.div3 {position: absolute;top: 10px;left: 230px;}.div4 {position: absolute;top: 120px;left: 230px;}.div5 {position: absolute;top: 230px;left: 230px;}.div6 {position: absolute;top: 230px;left: 120px;}.div7 {position: absolute;top: 230px;left: 10px;}.div8 {position: absolute;top: 120px;left: 10px;}/* 抽奖按钮样式 */.giftButton {position: absolute;width: 100px;height: 100px;top: 120px;left: 120px;border-radius: 10px;background-color: navajowhite;}#bigAlert {display: flex;position: fixed;/* z-index: 1; *//* left: 0; */top: 0;width: 100%;height: 100%;/* overflow: auto; */background-color: rgba(0, 0, 0, 0.4);align-content: center;}.alertContent {display: flex;justify-content: space-around;align-items: center;background-color: white;border-radius: 10px;/* margin: 15%; *//* padding: 20px; *//* border: 1px solid #888; */width: 300px;height: 100px;/* margin-left: auto;margin-right: auto; */margin: auto;}.buttonAlert {padding: 10px;color: black;background-color: gold;border: none;border-radius: 10px;cursor: pointer;}.buttonAlert:hover {background-color: #609EA0;color: blue;transition: 0.3s ease;}.mengban {background-color: rgba(0, 0, 0, 0.5);width: 100%;height: 100%;/* z-index: 2; */position: absolute;top: 0px;left: 0px;border-radius: 8px;}</style></head><body><div class="box"><div class="div1">电脑</div><div class="div2">手机</div><div class="div3">音响</div><div class="div4">冰箱</div><div class="div5">空调</div><div class="div6">衣柜</div><div class="div7">沙发</div><div class="div8">地毯</div><button class="giftButton"><span class="mengban" style="display: none;" readonly></span>开始抽奖</button></div><div id="bigAlert" style="display: none;"><div class="alertContent"><span id="alertMessage"></span><button class="buttonAlert" onclick="closeAlert()">确定</button></div></div><script>// 显示弹窗的function showAlert(a) {//先获取到大的divlet alertDiv = document.getElementById('bigAlert');//在获取span标签let messageSpan = document.getElementById('alertMessage');// 传参(中奖提示)// messageSpan.innerHTML = `<span style="color: red;">${a}</span>`;;//中奖提示（模板字符串）let startIndex = a.indexOf("中奖的是") + "中奖的是".length;let highlightedPart = a.slice(startIndex);messageSpan.innerHTML = `<span>${a.slice(0, startIndex)}<span style="color: red; font-weight: bold;">${highlightedPart}</span></span>`;//上面隐藏了 现在在显示出来alertDiv.style.display = 'block';}showAlert('aaaaaaaaaaaa');//关闭弹窗的function closeAlert() {//获取到大divlet alertDiv = document.getElementById('bigAlert');//隐藏alertDiv.style.display = 'none';}// 获取boxlet boxCenter = document.getElementsByClassName('box')[0];// 获取boxcenter里的所有的div元素let allGift = boxCenter.getElementsByTagName('div');// 获取到抽奖按钮，后续绑定点击事件let giftButtons = document.getElementsByClassName('giftButton')[0];// 充当所有的奖品的下标let giftIndex = 0;// 旋转时间间隔let time = 200;// 存定时器的let inter;// 本次抽奖的随机圈数let countTotal;let mengban = document.getElementsByClassName('mengban')[0];//闪动次数let bulingBuling = 0;// 点击事件giftButtons.onclick = function() {bulingBuling = 0;// 在数100-200格之间 。随机生成格数countTotal = Math.floor(Math.random() * 10 + 1) + 10;// 设定时器inter = setInterval(autoScroll, time);//蒙版显示。标签上隐藏了mengban.style.display = 'block';//清除点击事件 ，为了抽奖的时候不能再点抽奖按钮giftButtons.onclick = null;}//这个函数会在定时器内被反复调用function autoScroll() {//每次被调用这个函数 闪动次数+1bulingBuling++;// 随机选择下一个要变色显示的奖品索引（不按照顺序）let nextIndex;nextIndex = Math.floor(Math.random() * allGift.length);// 循环数组中的每一个元素 让他们颜色统一for (let i = 0; i < allGift.length; i++) {allGift[i].style.backgroundColor = 'cadetblue';}// 把 全部div 中挑出来的随机索引下标变黄allGift[nextIndex].style.backgroundColor = 'yellow';// 判断闪的格，是否等于上面要求的格数if (bulingBuling == countTotal) {mengban.style.display = 'none';//满足就清除定时器clearInterval(inter);// 提示用户showAlert('🎉恭喜你,中奖的是🎉:' + ' ' + allGift[nextIndex].innerHTML);//========================重新绑定点击事件============================================giftButtons.onclick = function() {bulingBuling = 0;// 在数100-200格之间 。随机生成格数countTotal = Math.floor(Math.random() * 10 + 1) + 10;// 设定时器inter = setInterval(autoScroll, time);mengban.style.display = 'block';giftButtons.onclick = null;}}}</script></body></html>

功能实现差异

第一段代码

滚动规则：奖品格子按照顺序依次滚动，从第一个格子开始，逐个向后滚动，当到达最后一个格子后，重新从第一个格子开始滚动，形成循环滚动的效果。
速度控制：在抽奖开始的前几圈（圈数小于 3），滚动速度逐渐加快，最快达到每 100 毫秒滚动一次；之后滚动速度逐渐变慢，最慢为每 300 毫秒滚动一次。
中奖判断：当随机生成的中奖下标与当前滚动到的格子下标相等，并且已经滚动超过 4 圈时，抽奖停止，弹出中奖提示框。
提示方式：使用浏览器默认的 alert 函数弹出提示框，显示中奖信息

第二段代码

滚动规则：奖品格子随机闪烁，每次闪烁时，随机选择一个奖品格子改变颜色，不按照顺序进行滚动。
速度控制：滚动速度固定为每 200 毫秒闪烁一次，没有动态调整速度的过程。
中奖判断：预先随机生成一个 11 - 20 之间的闪烁次数（countTotal），当闪烁次数达到这个随机值时，抽奖停止，弹出中奖提示框。
提示方式：自定义了一个模态框，通过修改模态框的 display 属性来显示和隐藏，并且对中奖信息中的奖品名称进行了样式处理（红色加粗）。

用 HTML、CSS 和 JavaScript 实现抽奖转盘效果

顺序抽奖前言这段代码实现了一个简单的抽奖转盘效果。页面上有一个九宫格布局的抽奖区域，周围八个格子分别放置了不同的奖品名称，中间是一个 “开始抽奖” 的按钮。点击按钮后，抽奖区域的格子会快速滚动，颜色不断变化&#xf…...

编程日记 2025/5/18 7:13:47

【人工智能学习笔记一】 AI分层架构、基本概念分类与产品技术架构

新的一年2025要对AI以及LLM有个强化的学习，所以第一篇先对整体有个大概的认知，一直分不清LLM和AI的关系，在整个体系里的位置，以及AIGC是什么东西，AI AGENT类似豆包等和大语言模型的具体关系是什么，整个AI的…...

编程日记 2025/5/17 23:39:32

windows10 配置使用json server作为图片服务器

步骤1：在vs code中安装json server, npm i -g json-server 注意：需要安装对应版本的json server，不然可能会报错，比如： npm i -g json-server 0.16.3 步骤2：出现如下报错： json-server 不是…...

编程日记 2025/5/16 12:08:08

【Elasticsearch 基础入门】Centos7下Elasticsearch 7.x安装与配置（单机）

Elasticsearch系列文章目录【Elasticsearch 基础入门】一文带你了解Elasticsearch！！！【Elasticsearch 基础入门】Centos7下Elasticsearch 7.x安装与配置（单机） 目录 Elasticsearch系列文章目录前言单机模式1. 安装 J…...

编程日记 2025/5/18 6:48:12

【MySQL】语言连接

语言连接一、下载二、mysql_get_client_info1、函数2、介绍3、示例三、其他函数1、mysql_init2、mysql_real_connect3、mysql_query4、mysql_store_result5、mysql_free_result6、mysql_num_fields7、mysql_num_rows8、mysql_fetch_fields9、mysql_fetch_row10、mysql_close …...

编程日记 2025/5/18 6:34:23

【零拷贝】

目录一：了解IO基础概念二：数据流动的层次结构三：零拷贝 1.传统IO文件读写 2.mmap 零拷贝技术 3.sendFile 零拷贝技术一：了解IO基础概念理解CPU拷贝和DMA拷贝我们知道，操作系统对于内存空间&…...

编程日记 2025/5/18 6:37:25

四、GPIO中断实现按键功能

4.1 GPIO简介输入输出（I/O）是一个非常重要的概念。I/O泛指所有类型的输入输出端口，包括单向的端口如逻辑门电路的输入输出管脚和双向的GPIO端口。而GPIO（General-Purpose Input/Output）则是一个常见的术语&#xff0c…...

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

qt-Quick3D笔记之官方例程Runtimeloader Example运行笔记

qt-Quick3D笔记之官方例程Runtimeloader Example运行笔记文章目录 qt-Quick3D笔记之官方例程Runtimeloader Example运行笔记1.例程运行效果2.例程缩略图3.项目文件列表4.main.qml5.main.cpp6.CMakeLists.txt 1.例程运行效果运行该项目需要自己准备一个模型文件 2.例程缩略图…...

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

IM 即时通讯系统-01-概览

前言有时候希望有一个 IM 工具，比如日常聊天，或者接受报警信息。其实主要是工作使用，如果是接收报警等场景，其实DD这种比较符合场景。那么有没有必要再创造一个DD呢？ 答案是如果处于个人的私有化使用&#xff0…...

编程日记 2025/5/18 6:41:29

二叉树——429，515，116

今天继续做关于二叉树层序遍历的相关题目，一共有三道题，思路都借鉴于最基础的二叉树的层序遍历。 LeetCode429.N叉树的层序遍历这道题不再是二叉树了，变成了N叉树，也就是该树每一个节点的子节点数量不确定，可能为2&a…...

编程日记 2025/5/18 6:25:44

Baklib构建高效协同的基于云的内容中台解决方案

内容概要随着云计算技术的飞速发展，内容管理的方式也在不断演变。企业面临着如何在数字化转型过程中高效管理和协同处理内容的新挑战。为应对这些挑战，引入基于云的内容中台解决方案显得尤为重要。 Baklib作为创新型解决方案提供商，致力于…...

编程日记 2025/5/17 11:20:54

MP4基础

一、什么是MP4？ MP4是一套用于音频、视频信息的压缩编码标准，由国际标准化组织（ISO）和国际电工委员会（IEC）下属的“动态图像专家组”（Moving Picture Experts Group，即MPEG&#xff…...

编程日记 2025/5/18 6:34:23

年化18%-39.3%的策略集 | backtrader通过xtquant连接qmt实战

原创内容第785篇，专注量化投资、个人成长与财富自由。大年初五，年很快就过完了。其实就是本身也只是休假一周，但是我们赋予了它太多意义。周五咱们发布发aitrader v4.1，带了backtraderctp期货的实盘接口： aitra…...

编程日记 2025/5/17 17:19:30

通过Redisson构建延时队列并实现注解式消费

目录一、序言二、延迟队列实现1、Redisson延时消息监听注解和消息体2、Redisson延时消息发布器3、Redisson延时消息监听处理器三、测试用例四、结语一、序言两个月前接了一个4万的私活，做一个线上商城小程序，在交易过程中不可避免的一个问题就是用户…...

编程日记 2025/5/18 3:34:39

RAG是否被取代（缓存增强生成-CAG）吗？

引言： 本文深入研究一种名为缓存增强生成（CAG）的新技术如何工作并减少/消除检索增强生成（RAG）弱点和瓶颈。 LLMs 可以根据输入给他的信息给出对应的输出，但是这样的工作方式很快就不能满足应用的需要: 因…...

编程日记 2025/5/15 8:37:39

MiniMax：人工智能领域的创新先锋

MiniMax：人工智能领域的创新先锋在人工智能领域，MiniMax正以其强大的技术实力和创新的模型架构，成为全球关注的焦点。作为一家成立于2021年12月的通用人工智能科技公司，MiniMax专注于开发多模态、万亿参数的MoE（Mixt…...

编程日记 2025/5/13 17:09:18

pytorch基于GloVe实现的词嵌入

PyTorch 实现 GloVe（Global Vectors for Word Representation） 的完整代码，使用中文语料进行训练，包括共现矩阵构建、模型定义、训练和测试。 1. GloVe 介绍基于词的共现信息（不像 Word2Vec 使用滑动窗口预测&…...

编程日记 2025/5/15 12:23:13

Unity实现按键设置功能代码

一、前言最近在学习unity2D，想做一个横版过关游戏，需要按键设置功能，让用户可以自定义方向键与攻击键等。自己写了一个，总结如下。二、界面效果图这个是一个csv文件，准备第一列是中文按键说明，第二列…...

编程日记 2025/5/14 3:52:52

C++ 入门速通-第3章【黑马】

内容来源于：黑马集成开发环境：CLion 先前学习完了C第1章的内容： C 入门速通-第1章【黑马】-CSDN博客 C 入门速通-第2章【黑马】-CSDN博客下面继续学习第3章： 数组： 字符数组： 多维数组： …...

编程日记 2025/5/17 3:14:30

JavaScript 中的 CSS 与页面响应式设计

JavaScript 中的 CSS 与页面响应式设计 JavaScript 中的 CSS 与页面响应式设计1. 引言2. JavaScript 与 CSS 的基本概念2.1 CSS 的作用2.2 JavaScript 的作用3. 动态控制样式：JavaScript 修改 CSS 的方法3.1 使用 `document.styleSheets` API3.2 使用 `classList` 修改类3.3 使…...

编程日记 2025/5/16 4:07:41

100.3 AI量化面试题：解释配对交易(Pairs Trading)的原理，并说明如何选择配对股票以及设计交易信号

目录 0. 承前1. 配对交易基本原理1.1 什么是配对交易1.2 基本假设 2. 配对选择方法2.1 相关性分析2.2 协整性检验 3. 价差计算方法3.1 简单价格比率3.2 回归系数法 4. 交易信号设计4.1 标准差方法4.2 动态阈值方法 5. 风险管理5.1 止损设计5.2 仓位管理 6. 策略评估6.1 回测框架…...

编程日记 2025/5/11 14:07:29

[SAP ABAP] Debug Skill

SAP ABAP Debug相关资料 [SAP ABAP] DEBUG ABAP程序中的循环语句 [SAP ABAP] 静态断点的使用 [SAP ABAP] 在ABAP Debugger调试器中设置断点 [SAP ABAP] SE11 / SE16N 修改标准表(慎用)...

编程日记 2025/5/9 18:39:38

WSL2中安装的ubuntu开启与关闭探讨

1. PC开机后，查询wsl状态在cmd或者powersell中输入 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 22. 从windows访问WSL2 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 23. 在ubuntu中打开一个工作区后…...

编程日记 2025/5/12 4:50:30

走向基于大语言模型的新一代推荐系统：综述与展望

HightLight 论文题目：Towards Next-Generation LLM-based Recommender Systems: A Survey and Beyond作者机构：吉林大学、香港理工大学、悉尼科技大学、Meta AI论文地址： https://arxiv.org/abs/2410.1974 基于大语言模型的下一代推荐系统&…...

编程日记 2025/5/12 22:25:54

【深度分析】DeepSeek 遭暴力破解，攻击 IP 均来自美国，造成影响有多大？有哪些好的防御措施？

技术铁幕下的暗战：当算力博弈演变为代码战争一场针对中国AI独角兽的全球首例国家级密码爆破，揭开了数字时代技术博弈的残酷真相。DeepSeek服务器日志中持续跳动的美国IP地址，不仅是网络攻击的地理坐标，更是技术霸权对新兴挑战者的…...

编程日记 2025/5/17 15:56:41

双指针算法思想——OJ例题扩展算法解析思路

大家好！上一期我发布了关于双指针的OJ平台上的典型例题思路解析，基于上一期的内容，我们这一期从其中内容扩展出来相似例题进行剖析和运用，一起来试一下吧！ 目录一、基于移动零的举一反三题一：27. 移除…...

编程日记 2025/5/16 11:23:55

初始Linux(7)：认识进程（下）

1. 进程优先级 cpu 资源分配的先后顺序，就是指进程的优先权（ priority ）。优先权高的进程有优先执行权利。配置进程优先权对多任务环境的 linux 很有用，可以改善系统性能。还可以把进程运行到指定的CPU 上，这样一来…...

编程日记 2025/5/14 2:05:57

人工智能第2章-知识点与学习笔记

结合教材2.1节，阐述什么是知识、知识的特性,以及知识的表示。人工智能最早应用的两种逻辑是什么？阐述你对这两种逻辑表示的内涵理解。什么谓词，什么是谓词逻辑，什么是谓词公式。谈谈你对谓词逻辑中的量词的理解。阐述谓词公式的解…...

编程日记 2025/5/17 23:27:46

Kotlin 协程与 Java 虚拟线程对比测试（娱乐性质，请勿严谨看待本次测试）

起因昨天在群里聊到虚拟线程的执行效率问题的时候虽然最后的结论是虚拟线程在针对IO密集型任务时具有很大的优势。但是讨论到虚拟线程和Kotlin 的协程的优势对比的话，这时候所有人都沉默了。所以有了本次的测试提前声明：本次测试是不严谨的&#xff0…...

编程日记 2025/5/17 21:45:04

C++中的拷贝构造器（Copy Constructor）

在C中，拷贝构造器（Copy Constructor）是一种特殊的构造函数，用于创建一个新对象，该对象是另一个同类型对象的副本。当使用一个已存在的对象来初始化一个新对象时，拷贝构造器会被调用。拷贝构造器的定义拷…...

编程日记 2025/5/13 22:33:27

Spring Boot项目如何使用MyBatis实现分页查询

写在前面：大家好！我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正，感谢大家的不吝赐教。我的唯一博客更新地址是：https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油，冲鸭&#x…...

编程日记 2025/5/15 6:29:17

独立开发经验谈：如何借助 AI 辅助产品 UI 设计

我在业余时间开发了一款自己的独立产品：升讯威在线客服与营销系统。陆陆续续开发了几年，从一开始的偶有用户尝试，到如今线上环境和私有化部署均有了越来越多的稳定用户，在这个过程中，我也积累了不少如何开发运营一款独…...

编程日记 2025/5/16 8:01:49

笔灵ai写作技术浅析（三）：深度学习

笔灵AI写作的深度学习技术主要基于Transformer架构，尤其是GPT（Generative Pre-trained Transformer）系列模型。 1. Transformer架构 Transformer架构由Vaswani等人在2017年提出，是GPT系列模型的基础。它摒弃了传统的循环神经网络（RNN）和卷积神经网络（CNN），完全依赖自…...

编程日记 2025/5/17 11:30:18

https数字签名手动验签

以bing.com 为例 1. CA 层级的基本概念 CA 层级是一种树状结构，由多个层级的 CA 组成。每个 CA 负责为其下一层级的实体（如子 CA 或终端实体）颁发证书。层级结构的顶端是根 CA（Root CA），它是整个 PKI 体…...

编程日记 2025/5/15 2:03:09

为什么LabVIEW适合软硬件结合的项目？

LabVIEW是一种基于图形化编程的开发平台，广泛应用于软硬件结合的项目中。其强大的硬件接口支持、实时数据采集能力、并行处理能力和直观的用户界面，使得它成为工业控制、仪器仪表、自动化测试等领域中软硬件系统集成的理想选择。LabVIEW的设计哲学强调模…...

编程日记 2025/5/14 7:42:59

C# 操作符重载对象详解

.NET学习资料 .NET学习资料 .NET学习资料一、操作符重载的概念在 C# 中，操作符重载允许我们为自定义的类或结构体定义操作符的行为。通常，我们熟悉的操作符，如加法（）、减法（-）、乘法&#…...

编程日记 2025/5/16 8:21:20

git：恢复纯版本库

初级代码游戏的专栏介绍与文章目录-CSDN博客我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。这些代码大部分以Linux为目标但部分代码是纯C的，可以在任何平台上使用。源码指引：github源…...

编程日记 2025/5/17 19:08:20

java异常处理——try catch finally

单个异常处理 1.当try里的代码发生了catch里指定类型的异常之后，才会执行catch里的代码，程序正常执行到结尾 2.如果try里的代码发生了非catch指定类型的异常，则会强制停止程序，报错 3.finally修饰的代码一定会执行，除…...

编程日记 2025/5/17 9:16:22

【架构面试】二、消息队列和MySQL和Redis

MQ MQ消息中间件问题引出与MQ作用常见面试问题：面试官常针对项目中使用MQ技术的候选人提问，如如何确保消息不丢失，该问题可考察候选人技术能力。MQ应用场景及作用：以京东系统下单扣减京豆为例，MQ用于交易服和京豆服…...

编程日记 2025/5/17 9:17:07

A4988一款常用的步进电机驱动芯片

A4988 是一款常用的步进电机驱动芯片，广泛应用于 3D 打印机、CNC 机床和小型自动化设备中。它可以驱动多种类型的步进电机，但需要根据电机的参数（如电压、电流、相数等）进行合理配置。一、A4988 的主要特性驱动能力：…...

编程日记 2025/5/14 21:08:27

TypeScript语言的语法糖

TypeScript语言的语法糖 TypeScript作为一种由微软开发的开源编程语言，它在JavaScript的基础上添加了一些强类型的特性，使得开发者能够更好地进行大型应用程序的构建和维护。在TypeScript中，不仅包含了静态类型、接口、枚举等强大的特性&…...

编程日记 2025/5/16 22:02:02

A星算法两元障碍物矩阵转化为rrt算法四元障碍物矩阵

对于a星算法obstacle所表示的障碍物障碍物信息，每行表示一个障碍物的坐标，例如2 , 3; % 第一个障碍物在第二行第三列，也就是边长为1的正方形障碍物右上角横坐标是2，纵坐标为3，障碍物的宽度和高度始终为1.在rrt路径规划…...

编程日记 2025/5/17 17:19:26

什么情况下，C#需要手动进行资源分配和释放？什么又是非托管资源？

扩展：如何使用C#的using语句释放资源？什么是IDisposable接口？与垃圾回收有什么关系？-CSDN博客托管资源的回收有GC自动触发，而非托管资源需要手动释放。在 C# 中，非托管资源是指那些不由 CLR（…...

编程日记 2025/5/15 8:17:50

【最长上升子序列Ⅱ——树状数组，二分+DP，纯DP】

题目代码（只给出树状数组的） #include <bits/stdc.h> using namespace std; const int N 1e510; int n, m; int a[N], b[N], f[N], tr[N]; //f[i]表示以a[i]为尾的LIS的最大长度 void init() {sort(b1, bn1);m unique(b1, bn1) - b - 1;for(in…...

编程日记 2025/5/16 13:24:33

day37|完全背包基础+leetcode 518.零钱兑换II ，377.组合总和II

完全背包理论基础完全背包与01背包的不同在于01背包的不同物品每个都只可以使用一次，但是完全背包的不同物品可以使用无数次在01背包理论基础中，为了使得物品只被使用一次，我们采取倒序遍历来控制回顾：>> for(int j …...

编程日记 2025/5/16 12:37:29

【VM】VirtualBox安装ubuntu22.04虚拟机

阅读本文之前，请先根据安装virtualbox 教程安装virtulbox虚拟机软件。 1.下载Ubuntu系统镜像打开阿里云的镜像站点：https://developer.aliyun.com/mirror/ 找到如图所示位置，选择Ubuntu 22.04.3(destop-amd64)系统 Ubuntu 22.04.3(desto…...

编程日记 2025/5/16 22:01:27