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

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

news 2026/1/12 8:11:04

顺序抽奖

前言

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

效果展示

 

代码详情

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);
}
滚动函数
  1. 奖品格子切换：
    • 如果 k 小于 allGift.length - 1，说明还没有转到最后一个奖品格子，将 k 加 1，把上一个奖品格子的背景颜色变回 cadetblue，当前 k 对应的格子背景颜色设置为黄色。
    • 如果 k 等于或大于 allGift.length - 1，说明转到了最后一个奖品格子，将 k 重置为 0，代表开始下一圈，同时圈数 count 加 1，把上一圈最后一个奖品格子的背景颜色变回 cadetblue，当前 k 对应的格子背景颜色设置为黄色。
  2. 滚动速度调整：
    • 当圈数 count 小于 3 时，每次将 time 减去 100 毫秒，让滚动速度变快，但最快不超过 100 毫秒。
    • 当圈数 count 大于等于 3 时，每次将 time 加上 100 毫秒，让滚动速度变慢，但最慢不超过 300 毫秒。
  3. 中奖判断与处理：
    • 先使用 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 实现抽奖转盘效果

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

编程日记 2025/2/3 13:42:20

Skewer v0.2.2安装与使用-生信工具43

01 Skewer 介绍 Skewer&#xff08;来自于 SourceForge&#xff09;实现了一种基于位掩码的 k-差异匹配算法&#xff0c;专门用于接头修剪&#xff0c;特别设计用于处理下一代测序&#xff08;NGS&#xff09;双端序列。 fastp安装及使用-fastp v0.23.4&#xff08;bioinfoma…...

编程日记 2025/2/3 13:35:12

C语言：链表排序与插入的实现

好的！以下是一篇关于这段代码的博客文章： 从零开始：链表排序与插入的实现 在数据结构的学习中，链表是一种非常基础且重要的数据结构。今天，我们将通过一个简单的 C 语言程序，来探讨如何实现一个从小到大排序的链表，并在其中插入一个新的节点。这个过程不仅涉及链表的基…...

编程日记 2025/2/3 13:34:11

【Elasticsearch】doc_values 可以用于查询操作

确实&#xff0c;doc values 可以用于查询操作&#xff0c;尽管它们的主要用途是支持排序、聚合和脚本中的字段访问。在某些情况下&#xff0c;Elasticsearch 也会利用 doc values 来执行特定类型的查询。以下是关于 doc values 在查询操作中的使用及其影响的详细解释&#xff…...

编程日记 2025/2/3 13:29:04

深度学习深度解析：从基础到前沿

引言 深度学习作为人工智能的一个重要分支&#xff0c;通过模拟人脑的神经网络结构来进行数据分析和模式识别。它在图像识别、自然语言处理、语音识别等领域取得了显著成果。本文将深入探讨深度学习的基础知识、主要模型架构以及当前的研究热点和发展趋势。 基础概念与数学原理…...

编程日记 2025/2/3 13:27:00

JVM的GC详解

获取GC日志方式大抵有两种 第一种就是设定JVM参数在程序启动时查看&#xff0c;具体的命令参数为: -XX:PrintGCDetails # 打印GC日志 -XX:PrintGCTimeStamps # 打印每一次触发GC时发生的时间第二种则是在服务器上监控:使用jstat查看,如下所示&#xff0c;命令格式为jstat -gc…...

编程日记 2025/2/3 13:22:53

【开源免费】基于Vue和SpringBoot的校园网上店铺系统（附论文）

本文项目编号 T 187 &#xff0c;文末自助获取源码 \color{red}{T187&#xff0c;文末自助获取源码} T187&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/2/3 13:20:45

测压表压力表计量表针头针尾检测数据集VOC+YOLO格式4862张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4862 标注数量(xml文件个数)&#xff1a;4862 标注数量(txt文件个数)&#xff1a;4862 …...

编程日记 2025/2/3 13:18:43

Vue 3 30天精进之旅：Day 12 - 异步操作

在现代前端开发中&#xff0c;异步操作是一个非常常见的需求&#xff0c;例如从后端API获取数据、进行文件上传等任务。Vue 3 结合组合式API和Vuex可以方便地处理这些异步操作。今天我们将重点学习如何在Vue应用中进行异步操作&#xff0c;包括以下几个主题&#xff1a; 异步操…...

编程日记 2025/2/3 13:15:40

【网络】3.HTTP(讲解HTTP协议和写HTTP服务)

目录 1 认识URL1.1 URI的格式 2 HTTP协议2.1 请求报文2.2 响应报文 3 模拟HTTP3.1 Socket.hpp3.2 HttpServer.hpp3.2.1 start()3.2.2 ThreadRun()3.2.3 HandlerHttp&#xff08;&#xff09; 总结 1 认识URL 什么是URI&#xff1f; URI 是 Uniform Resource Identifier的缩写&…...

编程日记 2025/2/3 13:14:38

[paddle] 矩阵相关的指标

行列式 det 行列式定义参考 d e t ( A ) ∑ i 1 , i 2 , ⋯ , i n ( − 1 ) σ ( i 1 , ⋯ , i n ) a 1 , i 1 a 2 , i 2 , ⋯ , a n , i n det(A) \sum_{i_1,i_2,\cdots,i_n } (-1)^{\sigma(i_1,\cdots,i_n)} a_{1,i_1}a_{2,i_2},\cdots, a_{n,i_n} det(A)i1​,i2​,⋯,in​…...

编程日记 2025/2/3 13:11:32

docker部署SpringBoot项目简单流程

一、docker基础命令理解学习 1、常见命令 docker启动之前要关闭防火墙systemctl stop firewalld # 关闭防火墙systemctl disable firewalld # 禁止开机启动防火墙systemctl start docker # 启动docker服务systemctl stop docker # 停止docker服务systemctl restart docker # …...

编程日记 2025/2/3 13:10:30

Python学习——函数参数详解

Python中的函数参数传递机制允许多种灵活的参数类型&#xff0c;可以根据需求灵活配置参数&#xff0c;这使得函数具有更强大的扩展性和适应性。以下是对各类参数类型的详细说明&#xff1a; 1. 定义函数的不同参数类型 1.1 位置参数 定义方式&#xff1a;def func(a, b2) 特…...

编程日记 2025/2/3 13:05:25

Chromium132 编译指南 - Android 篇（一）：编译前准备

1. 引言 欢迎来到《Chromium 132 编译指南 - Android 篇》系列的第一部分。本系列指南将引导您逐步完成在 Android 平台上编译 Chromium 132 版本的全过程。Chromium 作为一款由 Google 主导开发的开源浏览器引擎&#xff0c;为众多现代浏览器提供了核心驱动力。而 Android 作…...

编程日记 2025/2/3 13:04:24

.Net / C# 繁体中文 与 简体中文 互相转换, 支持地方特色词汇

版本号 Nuget 搜索 “OpenCCNET”, 注意别找错, 好多库的名字都差不多 支持 “繁,简” 的互相转换, 支持多个地区常用词汇的转换, 还支持 日文的新旧转换. OpenCC 在 .Net 中的实现 https://github.com/CosineG/OpenCC.NET <PackageReference Include"OpenCCNET"…...

编程日记 2025/2/3 13:01:20

Java泛型深度解析（JDK23）

第一章 泛型革命 1.1 类型安全的进化史 前泛型时代的类型转换隐患 代码的血泪史&#xff08;Java 1.4版示例&#xff09;&#xff1a; List rawList new ArrayList(); rawList.add("Java"); rawList.add(Integer.valueOf(42)); // 编译通过// 灾难在运行时爆发…...

编程日记 2025/2/3 12:56:14

【贪心算法篇】：“贪心”之旅--算法练习题中的智慧与策略（一）

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;贪心算法篇–CSDN博客 文章目录 一.贪心算法1.什么是贪心算法2.贪心算法的特点 二.例题1.柠…...

编程日记 2025/2/3 12:55:10

AJAX XML

AJAX XML 引言 随着互联网技术的不断发展，Web应用对用户交互性和实时性的要求越来越高。AJAX（Asynchronous JavaScript and XML）技术的出现，为Web应用开发提供了强大的支持。AJAX技术允许Web应用在不重新加载整个页面的情况下，与服务器进行异步通信。XML作为数据传输格式…...

编程日记 2025/2/3 12:44:47

踏入编程世界的第一个博客

我&#xff0c;一个双非一本大一新生&#xff0c;普通的不能再普通了&#xff0c;面对宏伟庞大的计算机世界仍显得举手无措&#xff0c;我自以为自身仍有些许骨气&#xff0c;不想普普通通&#xff0c;甚是浑浑噩噩的度过四年大学&#xff0c;经历了高考的打击&#xff0c;双非…...

编程日记 2025/2/3 12:42:45

2025年1月22日（网络编程 udp）

系统信息&#xff1a; ubuntu 16.04LTS Raspberry Pi Zero 2W 系统版本&#xff1a; 2024-10-22-raspios-bullseye-armhf Python 版本&#xff1a;Python 3.9.2 已安装 pip3 支持拍摄 1080p 30 (1092*1080), 720p 60 (1280*720), 60/90 (640*480) 已安装 vim 已安装 git 学习…...

编程日记 2025/2/3 12:41:44

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/9 19:55:02

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/1 1:25:51

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/11 1:54:13

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/12/31 11:47:46

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/1/8 4:14:47

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/11/22 14:54:34

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2026/1/12 4:47:25