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

news2025/1/17 21:58:43

实现思路

  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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1107636.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

森海塞尔EW-DP SKP直插式发射机：真正的无失真录制

森海塞尔EW-DP SKP直插式发射机：真正的无失真录制

韦德马克&#xff0c;2023年9月15日 – 10月底&#xff0c;EW-DP系列将再添新品——EW-DP SKP直插式发射机&#xff0c;面向摄像师、广播电视公司和电影制作人。板载32位浮点录制&#xff0c;结合该系列领先的134 dB发射机动态范围&#xff0c;让音频失真不复存在。无论要在现场…
阅读更多...
将 windows 控制台编码修改成UTF-8

将 windows 控制台编码修改成UTF-8

将 windows 控制台编码修改成UTF-8 临时修改&#xff0c;在控制台输入以下命令&#xff0c;65001代表utf-8编码 chcp 65001重新打开控制台后&#xff0c;又会变成默认GBK编码 永久修改&#xff0c;设置>时间和语言>语言>管理语言设置 打开更改系统区域设置&#xf…
阅读更多...
【Spring Boot项目】根据用户的角色控制数据库访问权限

【Spring Boot项目】根据用户的角色控制数据库访问权限

文章目录 简介方法一添加数据库依赖配置数据库连接创建用户角色表创建Spring Data JPA实体和仓库实现自定义的网关过滤器配置网关过滤器几个简单的测试API 方法二创建数据库访问接口实现数据库访问接口创建用户角色判断逻辑创建网关过滤器配置网关过滤器 总结 简介 在一些特定…
阅读更多...
0基础学习PyFlink——Map和Reduce函数处理单词统计

0基础学习PyFlink——Map和Reduce函数处理单词统计

在很多讲解大数据的案例中&#xff0c;往往都会以一个单词统计例子来抛砖引玉。本文也不免俗&#xff0c;例子来源于PyFlink的《Table API Tutorial》&#xff0c;我们会通过几种方式统计不同的单词出现的个数&#xff0c;从而达到循序渐进的学习效果。 常规方法 # input.py …
阅读更多...
《Python入门核心技术》专栏总目录

《Python入门核心技术》专栏总目录

❤️ 专栏名称&#xff1a;《Python入门核心技术》 &#x1f338; 内容介绍&#xff1a;基础篇、进阶篇、Web篇、网络爬虫、数据分析、数据可视化、自动化等&#xff0c;适合零基础和进阶的同学。 &#x1f680; 订阅专栏&#xff1a;订阅后可阅读专栏内所有内容&#xff0c;专…
阅读更多...
易点易动设备管理系统：提升生产企业设备保养效率的利器

易点易动设备管理系统：提升生产企业设备保养效率的利器

在现代生产企业中&#xff0c;设备保养是确保生产线稳定运行和产品质量的关键环节。然而&#xff0c;传统的设备保养方式往往面临效率低下、数据不准确等问题&#xff0c;影响了生产效率和竞争力。随着科技的进步&#xff0c;易点易动设备管理系统应运而生&#xff0c;以其智能…
阅读更多...
【Netty专题】【网络编程】从OSI、TCP/IP网络模型开始到BIO、NIO（Netty前置知识）

【Netty专题】【网络编程】从OSI、TCP/IP网络模型开始到BIO、NIO（Netty前置知识）

目录 前言前置知识一、计算机网络体系结构二、TCP/IP协议族2.1 简介*2.2 TCP/IP网络传输中的数据2.3 地址和端口号2.4 小总结 三、TCP/UDP特性3.1 TCP特性TCP 3次握手TCP 4次挥手TCP头部结构体 3.2 UDP特性 四、总结 课程内容一、网络通信编程基础知识1.1 什么是Socket1.2 长连…
阅读更多...
kkFileView源码编译并发布详细教程

kkFileView源码编译并发布详细教程

文章目录 概述为啥要自己进行源码编译我不懂Java代码&#xff0c;可以编译吗为什么写这篇教程 废话不多说&#xff0c;下面是详细操作教程安装JDK安装Git安装Maven编译kkFileView源码 kkFileView安装和使用编译后获得安装包&#xff0c;进行解压修改配置文件执行在线安装&#…
阅读更多...
开源贡献难吗？

开源贡献难吗？

本文整理自字节跳动 Flink SQL 技术负责人李本超在 CommunityOverCode Asia 2023 上的 Keynote 演讲&#xff0c;李本超根据自己在开源社区的贡献经历&#xff0c;基于他在贡献开源社区过程中的一些小故事和思考&#xff0c;如何克服困难&#xff0c;在开源社区取得突破&#x…
阅读更多...
DNS压测工具-dnsperf的安装和使用（centos）

DNS压测工具-dnsperf的安装和使用（centos）

系统调优 系统调优脚本&#xff0c;保存为sh文件&#xff0c;chmod提权后执行即可 #!/bin/sh #系统全局允许分配的最大文件句柄数&#xff1a; sysctl -w fs.file-max2097152 sysctl -w fs.nr_open2097152 echo 2097152 > /proc/sys/fs/nr_open #允许当前会话 / 进程打开文…
阅读更多...
1.JDK的安装方法以及环境变量的配置

1.JDK的安装方法以及环境变量的配置

学习Java的第一步应该从配置环境开始&#xff0c;这篇博文介绍了在哪下载安装包以及如何在windows电脑中配置&#xff0c;希望大家看完后可以独立安装 ~ 文章目录 一、下载安装包二、 安装路径配置三、 环境变量配置四、 验证是否配置成功 一、下载安装包 安装包可以从官网下载…
阅读更多...
第三方软件测评单位可为企业带来哪些收益?

第三方软件测评单位可为企业带来哪些收益?

随着信息科技的发展&#xff0c;软件市场竞争也越来越大&#xff0c;软件企业为了更好的专注于产品开发&#xff0c;以及保障软件质量&#xff0c;会将软件测试交由第三方软件测评单位进行。 第三方软件测评&#xff0c;顾名思义&#xff0c;是由独立的、与软件开发商无关的专业…
阅读更多...
Unity中Shader的XRay透视效果

Unity中Shader的XRay透视效果

文章目录 前言一、模拟菲涅尔效果1、获取 V 向量2、获取 N 向量3、点积输出效果4、模拟出菲涅尔效果(中间暗&#xff0c;周围亮) 二、实现 &#xff38;Ray 效果1、使用半透明排序、修改混合模式、加点颜色2、增加分层效果&#xff08;使用 frac 函数&#xff0c;只取小数部分&…
阅读更多...
CAPL如何实现27服务解锁

CAPL如何实现27服务解锁

在文章《CANoe-如何实现27服务解锁》里，我们介绍了诊断控制台中如何实现27解锁，如果我想在CANoe中使用CAPL程序解锁的话，又要如何实现呢？ CAPL脚本也是通过模拟手动操作来实现27解锁，所以步骤为： 发送10 03发送27 01接收67 01，获取seed值根据seed值和算法，计算出key值…
阅读更多...
自5月以来，俄罗斯Sandworm黑客侵入了11家乌克兰电信公司

自5月以来，俄罗斯Sandworm黑客侵入了11家乌克兰电信公司

导语&#xff1a;据乌克兰计算机应急响应团队&#xff08;CERT-UA&#xff09;的最新报告称&#xff0c;自2023年5月至9月&#xff0c;俄罗斯政府支持的黑客组织Sandworm成功侵入了乌克兰的11家电信服务提供商。这一组织被认为与俄罗斯武装部队的GRU有关。 简介 根据乌克兰计算…
阅读更多...
提高研发效率还得看Apipost

提高研发效率还得看Apipost

随着数字化转型的加速&#xff0c;API&#xff08;应用程序接口&#xff09;已经成为企业间沟通和数据交换的关键。而在API开发和管理过程中&#xff0c;API文档、调试、Mock和测试的协作显得尤为重要。Apipost正是这样一款一体化协作平台&#xff0c;旨在解决这些问题&#xf…
阅读更多...
阿里内推强推的并发编程学习笔记，原理+实战+面试题，面面俱到！

阿里内推强推的并发编程学习笔记，原理+实战+面试题，面面俱到！

并发编程 谈到并发编程&#xff0c;可能很多人都有过经验&#xff0c;甚至比我了解的更多。 那么并发与并行的区别又是什么&#xff1f; 并发编程是编程中的核心问题&#xff0c;实践中&#xff0c;当人们希望利用计算机处理一些现实世界问题&#xff0c;以及希望同时处理多…
阅读更多...
使用DelayQueue的实现延时任务

使用DelayQueue的实现延时任务

1、背景 项目中经常会用到类似一些需要延迟执行的功能&#xff0c;比如缓存。java提供了DelayQueue来很轻松的实现这种功能。Delayed接口中的getDelay方法返回值小于等于0的时候&#xff0c;表示时间到达&#xff0c;可以从DelayQueue中通过take()方法取的到期的对象。到期对象…
阅读更多...
电液比例负载控制变量泵PQ放大器

电液比例负载控制变量泵PQ放大器

对驱动执行元件&#xff0c;仅供应所需最小限度的压力、流量的节能型泵控制系统。与专用功率放大器配合使用。流量和全截流压力按功率放大器的输入电流成比例地进行控制。在实际应用中&#xff0c;该控制系统与专用功率放大器配合使用&#xff0c;可以根据实际需求&#xff0c;…
阅读更多...
Python学习基础笔记七十五——Python调用其他程序

Python学习基础笔记七十五——Python调用其他程序

Python经常被用来开发自动化程序。自动化程序往往需要调用其他的程序。 例如&#xff0c;我们可以代码中调用wget程序&#xff0c;而不是自己开发下载的代码。 这就是我们经常做的&#xff0c;在我们的Python程序中调佣其它程序&#xff0c;帮我们实现功能。 Python中调用外部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023