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

基于svg+js实现简单动态时钟

news 2025/7/12 14:44:23

实现思路

  1. 创建SVG容器：首先，创建一个SVG容器元素，用于容纳时钟的各个部分。指定SVG的宽度、高度以及命名空间。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 在此添加时钟的元素 -->
</svg>
  1. 绘制时钟的圆形背景：使用SVG的 <circle> （也可以用方形、椭圆）元素来绘制时钟的圆形背景。指定圆心坐标、半径和填充颜色。
<!-- 圆心为（100，100）半径为90，填充色fill这里是白色, 边框色stroke为黑色，边框宽度2px -->
<circle cx="100" cy="100" r="90" fill="white" stroke="black" stroke-width="2" />
  1. 绘制时钟的刻度线：绘制时钟的刻度线，包括小时刻度和分钟刻度。可以使用 <line> 元素来表示每个刻度线。通过循环来创建12个小时刻度和60个分钟刻度。
<!-- 小时刻度 -->
<line x1="100" y1="10" x2="100" y2="20" stroke="black" stroke-width="2" transform="rotate(30)" /><!-- 分钟刻度 */
<line x1="100" y1="10" x2="100" y2="15" stroke="black" stroke-width="1" transform="rotate(6)" />
  1. 绘制时钟的指针：绘制时钟的时针、分针和秒针。可以使用 <line> 元素来表示每个指针，根据当前时间的小时、分钟和秒数来计算指针的角度。
<!-- 时针 */
<line x1="100" y1="100" x2="100" y2="60" stroke="black" stroke-width="4" transform="rotate(30)" /><!-- 分针 */
<line x1="100" y1="100" x2="100" y2="40" stroke="black" stroke-width="3" transform="rotate(180)" /><!-- 秒针 */
<line x1="100" y1="100" x2="100" y2="30" stroke="red" stroke-width="1" transform="rotate(90)" />
  1. 添加数字标识：在时钟的圆周上添加小时数字标识。你可以使用 <text> 元素来添加小时数字，并使用 text-anchor 和 dominant-baseline 属性来对齐文本。
<text x="100" y="25" font-size="14" text-anchor="middle" dominant-baseline="middle">12</text>
<!-- 其他数字 */
  1. 更新时钟时间：要让时钟显示实际的时间，需要使用JavaScript来更新时针、分针和秒针的角度。你可以使用setInterval或requestAnimationFrame来定期更新时钟。
function updateClock() {const now = new Date();const hours = now.getHours() % 12;const minutes = now.getMinutes();const seconds = now.getSeconds();// 计算时针、分针、秒针的角度并更新const hourAngle = (360 / 12) * (hours + minutes / 60);const minuteAngle = (360 / 60) * (minutes + seconds / 60);const secondAngle = (360 / 60) * seconds;// 更新时针、分针、秒针的变换属性hourHand.setAttribute("transform", `rotate(${hourAngle}, 100, 100)`);minuteHand.setAttribute("transform", `rotate(${minuteAngle}, 100, 100)`);secondHand.setAttribute("transform", `rotate(${secondAngle}, 100, 100)`);
}setInterval(updateClock, 1000); // 每秒更新一次

完整的代码如下：

<!DOCTYPE html>
<html><head><style>#clock {width: 200px;height: 200px;}.number {font-family: Arial, sans-serif;font-size: 12px;text-anchor: middle;}</style>
</head><body><svg id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="90" stroke="black" stroke-width="2" fill="Lavender" /><line x1="100" y1="100" x2="100" y2="45" stroke="black" stroke-width="5" id="hour-hand" /><line x1="100" y1="100" x2="100" y2="25" stroke="black" stroke-width="3" id="minute-hand" /><line x1="100" y1="100" x2="100" y2="15" stroke="red" stroke-width="1" id="second-hand" /><circle cx="100" cy="100" r="4" stroke="black" stroke-width="2" fill="gray" /><g id="numbers" transform="translate(100,100)"><text x="0" y="-75" class="number">12</text><text x="80" y="5" class="number">3</text><text x="0" y="80" class="number">6</text><text x="-80" y="5" class="number">9</text></g><g id="ticks" transform="translate(100,100)"><!-- 刻度线，每5分钟一个 --><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(30)" /><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(60)" /><line x1="0" y1="-85" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(90)" /><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(120)" /><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(150)" /><line x1="0" y1="-85" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(180)" /><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(210)" /><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(240)" /><line x1="0" y1="-85" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(270)" /><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(300)" /><line x1="0" y1="-80" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(330)" /><line x1="0" y1="-85" x2="0" y2="-90" stroke="black" stroke-width="1" transform="rotate(360)" /></g></svg><script>function updateClock() {const now = new Date();const hours = now.getHours() % 12;const minutes = now.getMinutes();const seconds = now.getSeconds();const hourHand = document.getElementById('hour-hand');const minuteHand = document.getElementById('minute-hand');const secondHand = document.getElementById('second-hand');const hourDeg = (360 / 12) * hours + (360 / 12) * (minutes / 60);const minuteDeg = (360 / 60) * minutes;const secondDeg = (360 / 60) * seconds;hourHand.setAttribute('transform', `rotate(${hourDeg}, 100, 100)`);minuteHand.setAttribute('transform', `rotate(${minuteDeg}, 100, 100)`);secondHand.setAttribute('transform', `rotate(${secondDeg}, 100, 100)`);}setInterval(updateClock, 1000); // 每秒更新一次时钟updateClock(); // 初始加载时钟</script>
</body></html>

在这里插入图片描述
一个简单的时钟就做好了，svg还可以实现很多图形。下面将介绍svg的使用

svg详解

坐标

svg使用坐标系统来定位图形元素，这个坐标系统是基于画布的左上角为原点的坐标系。坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
在这里插入图片描述
说到像素就要介绍另一个很重要的属性viewBox。viewBox 属性的值是一个包含 4 个参数的列表 min-x, min-y, width and height，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素。
例如：

<svg width="200" height="200" viewBox="0 0 100 100">…</svg>

width和 height 属性定义了SVG元素的宽度和高度，即视口的尺寸。在此示例中，视口的宽度为200个用户单位，高度为200个用户单位。viewBox 属性的值 "0 0 100 100" 定义了视口的坐标系统。具体来说，它表示视口的左上角坐标为 (0, 0)，视口的宽度为100个用户单位，高度为100个用户单位。
这个 100100 的区域，会放到 200200 的画布上显示。于是就形成了放大两倍的效果。

viewBox 的作用是：

  • 控制可视区域：它确定了用户坐标系统中哪一部分会在视口中可见。在这个示例中，它定义了一个正方形视口，它与SVG元素的宽度和高度不同，因此可以用来控制用户坐标系统中的图形在视口中如何显示。
  • 缩放和平移：viewBox 可以通过设置不同的值来实现缩放和平移效果。例如，如果将 viewBox 设置为 "0 0 200 200"，那么视口会变得较大，用户坐标系统中的内容将以更小的比例显示在视口中，实现了缩放效果。
  • 实现响应式设计：viewBox 可用于实现响应式设计，允许SVG图形在不同尺寸的容器中自适应调整，而不会失真或变形。

图形

1、矩形：rect

rect常用的属性: x：左上角的x坐标，y：左上角y的坐标，width：宽。height：高，rx：圆角x方位的半径，ry：圆角y方位的半径

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

2、圆形
circle有三个基本的属性cx：圆心的x坐标，cy：圆心的y坐标，r:半径

<circle cx="100" cy="100" r="90" />

3、椭圆
ellipse 椭圆有四个基本属性 cx：圆心的x坐标，cy：圆心的y坐标，rx：x轴半径，ry：y轴半径。

<ellipse cx="75" cy="75" rx="20" ry="5"/>

4、线条

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>

x1：起点x位置，y1：起点的y位置，x2：终点的x位置，y2：终点的y位置

5、折线

 <polygon points="50 180, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 80" fill="white" stroke="black"/>

折线就是很多个点之间的连线，points属性就放各个点的坐标，用逗号隔开

路径

SVG 中的 <path> 元素用于创建复杂的路径和轮廓，它可以包括各种路径命令，每个命令都对路径的构建产生不同的影响。以下是 SVG <path> 元素中常用的路径命令及其意义：

  1. **M **：移动到指定的坐标位置。

    • M x y：将当前点移动到(x, y)的位置，而不绘制线条。

  2. **L **：从当前点绘制一条直线到指定的坐标位置。

    • L x y：从当前点绘制一条直线到(x, y)的位置。

  3. **H **：从当前点绘制一条水平线到指定的 x 坐标位置。

    • H x：从当前点绘制一条水平线到(x, 当前 y)的位置。

  4. V：从当前点绘制一条垂直线到指定的 y 坐标位置。

    • V y：从当前点绘制一条垂直线到(当前 x, y)的位置。

  5. **C **：绘制三次贝塞尔曲线。

    • C x1 y1, x2 y2, x y：从当前点绘制一条三次贝塞尔曲线，使用控制点 (x1, y1) 和 (x2, y2)，终点为 (x, y)。

  6. **S **：绘制平滑的三次贝塞尔曲线。

    • S x2 y2, x y：从当前点绘制一条平滑的三次贝塞尔曲线，只指定一个控制点 (x2, y2)，终点为 (x, y)。第一个控制点自动与上一次曲线的终点对称。

  7. Q：绘制二次贝塞尔曲线。

    • Q x1 y1, x y：从当前点绘制一条二次贝塞尔曲线，使用控制点 (x1, y1)，终点为 (x, y)。

  8. **T **：绘制平滑的二次贝塞尔曲线。

    • T x y：从当前点绘制一条平滑的二次贝塞尔曲线，只指定一个控制点 (x, y)。控制点自动与上一次曲线的终点对称。

  9. **A **：绘制椭圆弧。

    • A rx ry x-axis-rotation large-arc-flag sweep-flag x y：绘制椭圆弧，其中 (rx, ry) 是椭圆的半长轴和半短轴，x-axis-rotation 是椭圆的旋转角度，large-arc-flag 表示大弧还是小弧，sweep-flag 表示顺时针还是逆时针，(x, y) 是弧的终点。

  10. Z (Close Path)：关闭路径，连接当前点与路径的起始点，形成封闭的形状。

这些路径命令可以组合使用，以创建各种形状和轮廓。路径命令通常以字母表示，后跟一个或多个参数，参数用逗号或空格分隔。你可以使用 <path> 元素来定义路径，将路径命令放在 d 属性中，如下所示：

<path d="M 10 10 L 50 10 L 50 50 L 10 50 Z" />

上面的示例绘制一个矩形，首先移动到 (10, 10)，然后绘制四条线段，最后使用 Z 命令关闭路径。路径命令的顺序和参数的值决定了路径的形状。

边框与填充

  1. 边框（Stroke）：

    • stroke 属性：stroke 属性用于指定图形元素的边框颜色。可以使用颜色值（如颜色名称、十六进制值或RGB值）来设置边框颜色。
    • stroke-width 属性：stroke-width 属性用于指定边框的宽度，以用户单位（通常是像素）为单位。
    • stroke-linecap 属性：stroke-linecap 属性定义了线段的端点样式。它可以取三个值之一：butt（默认，平直的端点）、round（圆形的端点）、square（方形的端点）。
    • stroke-linejoin 属性：stroke-linejoin 属性定义了线段的连接样式。它可以取三个值之一：miter（默认，尖角连接）、round（圆角连接）、bevel（斜角连接）。
    • stroke-dasharray 属性：stroke-dasharray 属性定义了虚线的模式，即一系列数字，用来交替表示实线和空白线段的长度。例如，stroke-dasharray="5,2" 表示5个单位的实线和2个单位的空白线。
    • stroke-opacity 属性：stroke-opacity 属性用于定义边框的透明度，其值范围从0（完全透明）到1（完全不透明）。

  2. 填充（Fill）：

    • fill 属性：fill 属性用于指定图形元素的填充颜色。你可以使用颜色值来设置填充颜色。
    • fill-opacity 属性：fill-opacity 属性用于定义填充颜色的透明度，其值范围从0（完全透明）到1（完全不透明）。

以下是一个示例，演示如何在SVG中应用边框和填充：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><!-- 红色填充，蓝色边框，边框宽度为2，圆形 --><circle cx="50" cy="50" r="40" fill="red" stroke="blue" stroke-width="2" />
</svg>

文字

SVG中的文字属性允许你在图形中插入文本，并以多种方式自定义文本的外观。以下是SVG中常用的文字属性：

  1. x 和 y 属性：x 和 y 属性用于指定文本的起始坐标，即文本的左上角（如果文本是从左到右书写，或者是文本的起点）的坐标。这些坐标值是以用户单位（通常是像素）为单位的坐标值。

  2. font-family 属性：font-family 属性用于指定文本的字体系列。你可以设置字体系列的名称，以便SVG渲染引擎查找可用的字体。例如，font-family="Arial, sans-serif" 表示首选Arial字体，如果不可用，则使用默认的sans-serif字体。

  3. font-size 属性：font-size 属性用于指定文本的字体大小，以用户单位（通常是像素）为单位。例如，font-size="12" 表示字体大小为12个用户单位。

  4. font-weight 属性：font-weight 属性用于设置文本的粗细，可以取值如 “normal”、“bold” 或数字值（如 400 表示 normal，700 表示 bold）。

  5. font-style 属性：font-style 属性用于设置文本的字体风格，可以取值如 “normal”、“italic” 或 “oblique”。

  6. text-anchor 属性：text-anchor 属性定义文本的水平对齐方式。可以取值如 “start”（默认，文本的起点对齐到指定的x坐标）、“middle”（文本的中点对齐到指定的x坐标）、“end”（文本的末尾对齐到指定的x坐标）。

  7. dominant-baseline 属性：dominant-baseline 属性定义文本的垂直对齐方式。可以取值如 “auto”（默认，文本基线对齐到y坐标）、“middle”（文本中点对齐到y坐标）、“text-before-edge”（文本的顶部对齐到y坐标）等。

  8. text-decoration 属性：text-decoration 属性用于添加文本的装饰效果，如下划线、删除线等。可以取值如 “none”（默认，无装饰）、“underline”（下划线）。

  9. fill 属性：fill 属性用于设置文本的填充颜色，类似于图形元素的填充属性。你可以使用颜色值来指定填充颜色。

  10. fill-opacity 属性：fill-opacity 属性用于定义文本填充颜色的透明度，其值范围从0（完全透明）到1（完全不透明）。

以下是一个示例：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><!-- 在坐标 (50, 50) 处插入红色、粗体、24像素大小的文本 --><text x="50" y="50" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="red">Hello, SVG Text!</text>
</svg>

相关文章：

基于svg+js实现简单动态时钟

实现思路 创建SVG容器&#xff1a;首先&#xff0c;创建一个SVG容器元素&#xff0c;用于容纳时钟的各个部分。指定SVG的宽度、高度以及命名空间。 <svg width"200" height"200" xmlns"http://www.w3.org/2000/svg"><!-- 在此添加时钟…...

编程日记 2023/10/19 3:44:24

端到端测试（End-to-end tests）重试策略

作者&#xff5c;Giuseppe Donati&#xff0c;Trivago公司Web测试自动化工程师 整理&#xff5c;TesterHome 失败后重试&#xff0c;是好是坏&#xff1f; 为什么要在失败时重试所有测试&#xff1f;为什么不&#xff1f; 作为Trivago&#xff08;德国酒店搜索服务平台&…...

编程日记 2023/10/19 3:42:23

三相交错LLC软启动控制驱动波形分析--死区时间与占空比关系

三相交错LLC软启动控制驱动波形分析 文章目录 三相交错LLC软启动控制驱动波形分析一、电路原理二、时序分析三、环路分析四、控制策略1.软启动驱动波形趋势2.软启动驱动波形占空图3.软启动驱动波形详细图4.软启动代码分析5.Debug调试界面5.死区时间与实际输出5.1 死区时间50--对…...

编程日记 2023/10/19 3:41:21

数据结构详细笔记——栈与队列

文章目录 栈的三要素逻辑结构&#xff08;定义&#xff09;数据的运算&#xff08;基本操作&#xff09;存储结构&#xff08;物理结构&#xff09;顺序栈&#xff08;顺序存储&#xff09;链栈&#xff08;链式存储&#xff09; 队列的三要素逻辑结构&#xff08;定义&#xf…...

编程日记 2023/10/19 3:40:20

JVM调试命令与调试工具

目录 一、JDK自带命令 1、jps 2、jstat&#xff08;FullGC频繁解决方案&#xff09; 3、jmap 4、jhat 5、jstack(cpu占用高解决方案) 6、jinfo 二、JDK的可视化工具JConsole 1、JConsole 2、VisualVM 一、JDK自带命令 Sun JDK监控和故障处理命令如&#xff1a; 1、jps JVM Proc…...

编程日记 2023/10/19 3:39:18

《软件方法》第1章2023版连载（07）UML的历史和现状

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 1.3 统一建模语言UML 1.3.1 UML的历史和现状 上一节阐述了A→B→C→D的推导是不可避免的&#xff0c;但具体如何推导&#xff0c;有各种不同的做法&#xff0c;这些做法可以称为“方…...

编程日记 2023/10/19 3:38:17

chromium 54 chrome 各个版本发布功能列表(109-119)

chromium Features 109-119 From https://chromestatus.com/features chromium109 Features:12 Auto range support for font descriptors inside font-face rule Auto range support for variable fonts in ‘font-weight’, ‘font-style’ and ‘font-stretch’ descrip…...

编程日记 2023/10/19 3:37:16

Linux实现原理 — I/O 处理流程与优化手段

Linux I/O 接口 Linux I/O 接口可以分为以下几种类型&#xff1a; 文件 I/O 接口&#xff1a;用于对文件进行读写操作的接口&#xff0c;包括 open()、read()、write()、close()、lseek() 等。 网络 I/O 接口&#xff1a;用于网络通信的接口&#xff0c;包括 socket()、conne…...

编程日记 2023/10/19 3:36:13

第 367 场 LeetCode 周赛题解

A 找出满足差值条件的下标 I 模拟 class Solution { public:vector<int> findIndices(vector<int> &nums, int indexDifference, int valueDifference) {int n nums.size();for (int i 0; i < n; i)for (int j 0; j < i; j)if (i - j > indexDiffe…...

编程日记 2023/10/19 3:35:11

最新百度统计配置图文教程，获取siteId、百度统计AccessToken、百度统计代码教程

一、前言 很多网友开发者都不知道百度统计siteId、百度统计token怎么获取&#xff0c;在网上找的教程都是几年前老的教程&#xff0c;因此给大家出一期详细百度统计siteId、百度统计token、百度统计代码获取详细步骤教程。 二、登录到百度统计 1.1 登录到百度统计官网 使用…...

编程日记 2023/10/19 3:34:09

【C++ 学习 ㉘】- 详解 C++11 的列表初始化

目录 一、C11 简介 二、列表初始化 2.1 - 统一初始化 2.2 - 列表初始化的使用细节 2.2.1 - 聚合类型的定义 2.2.2 - 注意事项 2.3 - initializer_list 2.3.1 - 基本使用 2.3.2 - 源码剖析 一、C11 简介 1998 年&#xff0c;C 标准委员会发布了第一版 C 标准&#xff0…...

编程日记 2023/10/19 3:32:07

OpenCV12-图像卷积

OpenCV12-图像卷积 图像卷积 图像卷积 OpenCV中提供了filt2D()函数用于实现图像和卷积模板之间的卷积运算&#xff1a; void filter2D(InputArray src, // 输入图像OutputArray dst, // 输出图像int ddepth, // 输出图像数据类型&#xff08;深度&#xff09;&#xff…...

编程日记 2023/10/19 3:31:07

MVCC与BufferPool缓存机制

MVCC多版本并发控制机制 Mysql在可重复读隔离级别下如何保证事务较高的隔离性&#xff0c;我们上节课给大家演示过&#xff0c;同样的sql查询语句在一个事务里多次执行查询结果相同&#xff0c;就算其它事务对数据有修改也不会影响当前事务sql语句的查询结果。 这个隔离性就是…...

编程日记 2023/10/19 3:30:05

POI、Easy Excel操作Excel

文章目录 1.常用的场景2.基本功能3.Excel在Java中是一个对象4. 简单的写&#xff08;07版本&#xff08;.xlsx&#xff09;Excel&#xff09;大文件写HSSF大文件写XSSF大文件写SXSSF 5. Excel读5.1 读取遇到类型转化问题该怎么解决5.2 遇到Excel公式怎么办 6. Easy Excel6.1简单…...

编程日记 2023/10/19 3:29:04

网络安全（黑客）自学方向

每年报考网络安全专业的人数很多&#xff0c;但不少同学听说千万别学网络安全&#xff0c;害怕网络安全专业很难就业。下面就带大家深入了解一下网络安全专业毕业后可以干什么&#xff0c;包括网络安全专业的就业前景和方向等。 随着信息化时代的到来&#xff0c;网络安全行业…...

编程日记 2023/10/19 3:28:02

react写一个简单的3d滚轮picker组件

1. TreeDPicker.tsx文件 原理就不想赘述了, 想了解的话, 网址在: 使用vue写一个picker插件,使用3d滚轮的原理_vue3中支持3d picker选择器插件-CSDN博客 import React, { useEffect, useRef, Ref, useState } from "react"; import Animate from "../utils/an…...

编程日记 2023/10/19 3:27:00

Compose竖向列表LazyColumn

基础列表一 LazyColumn组件中用items加载数据&#xff0c;rememberLazyListState()结合rememberCoroutineScope()实现返回顶部。 /*** 基础列表一*/ Composable fun Items() {Box(modifier Modifier.fillMaxSize()) {val context LocalContext.currentval dataList arrayLi…...

编程日记 2023/10/19 3:25:59

6.自定义相机控制器

愿你出走半生,归来仍是少年&#xff01; Cesium For Unity自带的Dynamic Camera,拥有优秀的动态展示效果&#xff0c;但是其对于场景的交互方式用起来不是很舒服。 通过模仿Cesium JS 的交互方式&#xff0c;实现在Unity中的交互&#xff1a; 通过鼠标左键拖拽实现场景平移通过…...

编程日记 2023/10/19 3:24:58

一文带你GO语言入门

什么是go语言? Go语言(又称Golang)是Google开发的一种静态强类型、编译型、并发型,并具有垃圾回收功能的编程语言。Go语言的主要特点包括:- 简洁和简单 - 语法简单明快,易于学习和使用 特点 高效 编译速度快,执行效率高 并发支持 原生支持并发,利用goroutine实现高效的并发…...

编程日记 2023/10/19 3:23:57

前后端小项目链接

1.vue的创建 vue的项目创建 1.1 vue create vue_name 1.2 Babel Router(路由) CSS Pre-processors 路由可通过&#xff1a;npm i vue-router3.5.2 -S 下载 1.3less 1.4 In dedicated config files 1.5 启动命令&#xff1a;npm run serve 端口号在vue.config。js中配置 devS…...

编程日记 2023/10/19 3:22:56

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/7/11 23:23:21

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/7/9 13:20:20

STM32HAL库USART源代码解析及应用

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

编程新知 2025/7/7 3:24:43

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/7/12 6:36:52

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/7/9 7:27:47

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/7/11 5:06:29

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/7/8 0:08:16

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2025/7/7 5:56:10

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

编程新知 2025/7/7 11:52:14

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...

编程新知 2025/7/9 8:05:43