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

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

news 2026/1/12 7:22:40

顺序抽奖

前言

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

效果展示

 

代码详情

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

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/1/3 20:28:18

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/1/5 5:25:12

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/12/23 11:08:56

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/3 14:47:57

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/1/8 16:16:47

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2026/1/12 2:26:03