写个时钟（进阶篇）

最新推荐文章于 2024-08-15 18:19:19 发布
最新推荐文章于 2024-08-15 18:19:19 发布
阅读量935 收藏 24
点赞数 41
分类专栏： JavaScript HTML + CSS 文章标签： 前端 javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Conan9912345/article/details/140082060
版权

在“写个时钟（行为篇）”中，我们通过 JavaScript 动态创建的时针、分针和秒针，并直接在 JavaScript 中通过控制行内样式的 transform 属性，设置 rotate 的值，实现指针的旋转。这样的方式，对于 DOM 的控制消耗较大，若放到大项目中，对项目性能具有一定的影响，也让 JavaScript 代码较多，降低了可读性。

而且，设置实时时间的 setRealTime 函数，我们使用了递归调用，每隔一秒钟调用一次，那么每隔一秒钟就会运行整个函数一次，感觉简直是资源的浪费。

仔细想想，都已经是 4202 年了，感觉还是使用 JavaScript 大量控制 DOM 的方式，怎么看都有点点过时了。

曾经，听一位前端大神（尊重隐私，不透露名字）说过一句话：

 那么，秉承这一原则，我们对时钟页面作更加前卫的进阶处理吧！

一、时钟指针静态化

咱们前面是使用 JavaScript 动态生成的三个指针元素，通过 createElement 方法创建 DOM 对性能消耗较大，而且感觉不是必须的。于是我们将其直接写到 html 中：

<div class="dial">
  <div class="pointer hour"></div>
  <div class="pointer minute"></div>
  <div class="pointer second"></div>
</div>

如此一来，原本 JavaScript 中占有 16 行的创建指针的 createPointer 函数就可以删除了。

创建刻度的 createScale 函数不能删除，因为刻度有足足 60 个之多，直接在 html 中写 60 个 span 标签，还要每 5 个就给其加一个值为 bold 的 class 属性。相比之下，感觉还是在 JavaScript 中使用循环生成，代码显得更加简洁一些，逻辑上也更加优雅一些。

删除了创建指针的 createPointer 函数，对应的创建刻度的 createScale 函数的最后一行，就不能再调用创建指针的 createPointer 函数，而是应该直接调用设置实时时间的 setRealTime 函数：

/**
 * @description 创建刻度
*/
const createScale = () => {
  const oDiv = document.querySelector('.dial'); // 获取钟表盘面
  for (let i = 0; i < 60; i++) {
    const oSpan = document.createElement('span'); // 创建刻度元素
    oSpan.style.transform = `rotate(${6 * i}deg)`; // 设置旋转刻度属性
    if (i % 5 === 0) {
      oSpan.className = 'bold'; // 每 5 个刻度，让其显示突出一些
    }
    oDiv.appendChild(oSpan); // 将刻度放到钟表盘面
  }
  setRealTime(); // 设置实时时间
}

注意，设置实时时间的 setRealTime 函数，之前我们是把三个指针元素当作参数传入的，现在不再需要传入参数了。

二、重构设置实时时间函数

还是和“行为篇”一样的思路先构建一个设置实时时间的 setRealTime 函数，并获取到会用到的小时、分钟和秒：

/**
 * @description 设置实时时间
*/
const setRealTime = () => {
  const now = new Date(); // 获取当前时间
  const [hour, minute, second] = [now.getHours(), now.getMinutes(), now.getSeconds()]; // 取出当前小时、分钟和秒
}

我们知道，在 CSS 中，控制一个元素的旋转，都是通过 transform 属性中的 rotate 方法实现的，其语法为：transform: rotate(αdeg); 。

α 为旋转的度数，单位 deg 代表的是角度制。

说白了，就是以 transform-origin 定义的坐标位置为极坐标的原点（未定义该属性，默认为该元素的几何中心，即：transform-origin: 50% 50% 0;），顺时针旋转 α 个度数。

既然拿到了实时时间中的小时、分钟和秒，那么我们就可以根据性质，让其转行成度数，并设置到元素中。 

document.documentElement.style.setProperty('--hour', `${30 * hour}deg`); // 根据当前小时设置小时指针的旋转角度
document.documentElement.style.setProperty('--minute', `${6 * minute}deg`); // 根据当前分钟设置分钟指针的旋转角度
document.documentElement.style.setProperty('--second', `${6 * second}deg`); // 根据当前秒设置秒指针的旋转角度

耶？？？这是嘛呀？？？

没错，考虑到我们是把三个指针元素直接写在 html 中的，从心理上来说，我是不愿意再次从 JavaScript 中获取这三个元素的。既然如此，就只好把在 JavaScript 中计算出来的值传到 CSS 中进行处理。于是，CSS4 中的变量登场了：

.dial > .hour {
  top: 125px;
  width: 10px;
  height: 200px;
  transform-origin: center 175px;
  transform: rotate(var(--hour)) ;
}
.dial > .minute {
  top: 25px;
  width: 7.5px;
  height: 300px;
  transform-origin: center 275px;
  transform: rotate(var(--minute));
}
.dial > .second {
  top: 25px;
  width: 2.5px;
  height: 300px;
  transform-origin: center 275px;
  transform: rotate(var(--second));
}

对以上的 JavaScript 代码和 CSS 代码进行观察，相信聪明的您已经发现，我们在 JavaScript 中，通过 document.documentElement.style.setProperty 方法，给 CSS 声明了 --hour、--minute、--second 三个变量，其值为计算之后对应的角度值，还带有单位 deg。然后在 CSS 中对应的地方使用 var() 方法并传入对应的变量名，就可以取到相应的值。

 

这样，我们就获取了一个当前时间显示的效果。大功告成了……………………吗？ 

仔细观察就会发现，图中的当前时间是 10:46:11。在现实中，这个时候的时针和分针都不应该正正的指向对应值的刻度，而是会顺时针方向向前偏移对应的比例。 

理想是美好的，现实问题也是赤裸裸的存在的：这样的理想情况，怎么实现呢？

首先，我们单独用一个变量 sStart 记录秒针的当前度数（也叫起始位置）：

const sStart = 6 * second; // 设置秒指针的起始位置

分钟有 60 个刻度，那么 sStart / 60 就是分针应该在顺时针方向多偏移的角度。于是我们声明一个记录分针的当前度数的变量 mStart：

const mStart = 6 * minute + sStart / 60; // 设置分钟指针的起始位置

同样的道理，小时有 12 个刻度，那么 mStart / 12 就是时针应该在顺时针方向多偏移的角度。于是我们也声明一个记录时针的当前度数的变量 hStart：

const hStart = 30 * hour + mStart / 12; // 设置小时指针的起始位置

于是，整个设置实时时间的 setRealTime 函数就变成了这样：

/**
 * @description 设置实时时间
*/
const setRealTime = () => {
  const now = new Date(); // 获取当前时间
  const [hour, minute, second] = [now.getHours(), now.getMinutes(), now.getSeconds()]; // 取出当前小时、分钟和秒
  const sStart = 6 * second; // 设置秒指针的起始位置
  const mStart = 6 * minute + sStart / 60; // 设置分钟指针的起始位置
  const hStart = 30 * hour + mStart / 12; // 设置小时指针的起始位置

  document.documentElement.style.setProperty('--hour', `${hStart}deg`); // 根据当前小时设置小时指针的旋转角度
  document.documentElement.style.setProperty('--minute', `${mStart}deg`); // 根据当前分钟设置分钟指针的旋转角度
  document.documentElement.style.setProperty('--second', `${sStart}deg`); // 根据当前秒设置秒指针的旋转角度
}

得到的效果如下：

 

嗯~ o(*￣▽￣*)o~~~~~~无论如何，看时针和分针，确实和现实中的钟表显示一致了。 

三、让时钟动起来

前面“行为篇”中，我们是采用在设置实时时间的 setRealTime 函数中进行递归调用的。尽管我们只需要每隔一秒钟调用一次该函数，但是每次调用都会把上面繁琐的计算都运行一次，资源浪费不说，总是过不了心里的这一关。

设想一下，咱们已经根据当前时间让指针的起始位置都确定了。接下来只需要设置让时针自动每 12 个小时（216000 秒）绕一圈，让分针自动每一个小时（3600 秒）绕一圈，让秒针自动每 60 秒绕一圈，岂不美哉？ 

三个指针都是绕一圈后继续重复，需要具备两个条件：

  1. 需要知道每一个指针绕一圈之后的度数，即：起始位置 + 360 deg；

  2. 需要使用 CSS 动画来完成。

那么，我们先在设置实时时间的 setRealTime 函数中计算一下每一个指针绕一圈之后的度数，并继续通过 CSS4 变量传递给 CSS：

document.documentElement.style.setProperty('--toHour', `${hStart + 360}deg`); // 根据当前小时设置小时指针的旋转结束角度
document.documentElement.style.setProperty('--toMinute', `${mStart + 360}deg`); // 根据当前分钟设置分钟指针的旋转结束角度
document.documentElement.style.setProperty('--toSecond', `${sStart + 360}deg`); // 根据当前秒设置秒指针的旋转结束角度

这样，完整的设置实时时间的 setRealTime 函数就是这样的：

/**
 * @description 设置实时时间
*/
const setRealTime = () => {
  const now = new Date(); // 获取当前时间
  const [hour, minute, second] = [now.getHours(), now.getMinutes(), now.getSeconds()]; // 取出当前小时、分钟和秒
  const sStart = 6 * second; // 设置秒指针的起始位置
  const mStart = 6 * minute + sStart / 60; // 设置分钟指针的起始位置
  const hStart = 30 * hour + mStart / 12; // 设置小时指针的起始位置

  document.documentElement.style.setProperty('--hour', `${hStart}deg`); // 根据当前小时设置小时指针的旋转角度
  document.documentElement.style.setProperty('--minute', `${mStart}deg`); // 根据当前分钟设置分钟指针的旋转角度
  document.documentElement.style.setProperty('--second', `${sStart}deg`); // 根据当前秒设置秒指针的旋转角度
  document.documentElement.style.setProperty('--toHour', `${hStart + 360}deg`); // 根据当前小时设置小时指针的旋转结束角度
  document.documentElement.style.setProperty('--toMinute', `${mStart + 360}deg`); // 根据当前分钟设置分钟指针的旋转结束角度
  document.documentElement.style.setProperty('--toSecond', `${sStart + 360}deg`); // 根据当前秒设置秒指针的旋转结束角度
}

传递的 --toHour、--toMinute、--toSecond 变量，需要在 CSS 中定义到动画的最后一帧中。于是我们在 CSS 中分别定义三个指针的旋转动画：

@keyframes hour {
  to {
    transform: rotate(var(--toHour));
  }
}
@keyframes minute {
  to {
    transform: rotate(var(--toMinute));
  }
}
@keyframes second {
  to {
    transform: rotate(var(--toSecond));
  }
}

 然后，在时针、分针、秒针元素对应的 CSS 中分别调用对应的动画：

.dial > .hour {
  top: 125px;
  width: 10px;
  height: 200px;
  transform-origin: center 175px;
  transform: rotate(var(--hour)) ;
  animation: hour 216000s linear infinite;
}
.dial > .minute {
  top: 25px;
  width: 7.5px;
  height: 300px;
  transform-origin: center 275px;
  transform: rotate(var(--minute));
  animation: minute 3600s linear infinite;
}
.dial > .second {
  top: 25px;
  width: 2.5px;
  height: 300px;
  transform-origin: center 275px;
  transform: rotate(var(--second));
  animation: second 60s linear infinite;
}

 注意：三个动画在调用的时候都设置了匀速、重复；三个动画对应的时间都是秒数。

看一下效果：

 

这样，我们就用相对理想的方式把我们的时钟给完成了。 

完整源代码

最后，还是把最终的完整源代码贡献出来，大家拿走不谢(￣_,￣ ) 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clock</title>
<style type="text/css">
body {
  background: #333;
}
.dial {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 600px;
  margin: auto;
  border: 5px solid #fff;
  border-radius: 50%;
}
.dial > span {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: 5px;
  height: 10px;
  margin: auto;
  background: #fff;
  transform-origin: center 300px;
}
.dial > span.bold {
  width: 7.5px;
  height: 20px;
}
.dial > .pointer {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  background: #fff;
  border-radius: 5px;
}
.dial > .hour {
  top: 125px;
  width: 10px;
  height: 200px;
  transform-origin: center 175px;
  transform: rotate(var(--hour)) ;
  animation: hour 216000s linear infinite;
}
.dial > .minute {
  top: 25px;
  width: 7.5px;
  height: 300px;
  transform-origin: center 275px;
  transform: rotate(var(--minute));
  animation: minute 3600s linear infinite;
}
.dial > .second {
  top: 25px;
  width: 2.5px;
  height: 300px;
  transform-origin: center 275px;
  transform: rotate(var(--second));
  animation: second 60s linear infinite;
}
@keyframes hour {
  to {
    transform: rotate(var(--toHour));
  }
}
@keyframes minute {
  to {
    transform: rotate(var(--toMinute));
  }
}
@keyframes second {
  to {
    transform: rotate(var(--toSecond));
  }
}
</style>
<script type="text/javascript">
/**
 * @description 创建刻度
*/
const createScale = () => {
  const oDiv = document.querySelector('.dial'); // 获取钟表盘面
  for (let i = 0; i < 60; i++) {
    const oSpan = document.createElement('span'); // 创建刻度元素
    oSpan.style.transform = `rotate(${6 * i}deg)`; // 设置旋转刻度属性
    if (i % 5 === 0) {
      oSpan.className = 'bold'; // 每 5 个刻度，让其显示突出一些
    }
    oDiv.appendChild(oSpan); // 将刻度放到钟表盘面
  }
  setRealTime(); // 设置实时时间
}

/**
 * @description 设置实时时间
*/
const setRealTime = () => {
  const now = new Date(); // 获取当前时间
  const [hour, minute, second] = [now.getHours(), now.getMinutes(), now.getSeconds()]; // 取出当前小时、分钟和秒
  const sStart = 6 * second; // 设置秒指针的起始位置
  const mStart = 6 * minute + sStart / 60; // 设置分钟指针的起始位置
  const hStart = 30 * hour + mStart / 12; // 设置小时指针的起始位置

  document.documentElement.style.setProperty('--hour', `${hStart}deg`); // 根据当前小时设置小时指针的旋转角度
  document.documentElement.style.setProperty('--minute', `${mStart}deg`); // 根据当前分钟设置分钟指针的旋转角度
  document.documentElement.style.setProperty('--second', `${sStart}deg`); // 根据当前秒设置秒指针的旋转角度
  document.documentElement.style.setProperty('--toHour', `${hStart + 360}deg`); // 根据当前小时设置小时指针的旋转结束角度
  document.documentElement.style.setProperty('--toMinute', `${mStart + 360}deg`); // 根据当前分钟设置分钟指针的旋转结束角度
  document.documentElement.style.setProperty('--toSecond', `${sStart + 360}deg`); // 根据当前秒设置秒指针的旋转结束角度
}

window.onload = createScale;
</script>
</head>
<body>
  <div class="dial">
    <div class="pointer hour"></div>
    <div class="pointer minute"></div>
    <div class="pointer second"></div>
  </div>
</body>
</html>

篇幅有限，很多地方都没有过多展开讲解了。之后，我们会写出更多有趣的文章，大家敬请期待！

 

关注我，为您奉上更多精彩内容！ 

Conan9912345
关注
  • 41
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
6 Verilog进阶篇：时序逻辑2
lilinrun的博客
03-15 561
VL13时钟分频（偶数） 描述 请使用D触发器设计一个同时输出2/4/8分频的50%占空比的时钟分频器 注意rst为低电平复位 信号示意图： 波形示意图： 输入描述： 输入信号 clk rst 类型 wire 输出描述： 输出信号clk_out2clk_out4 clk_out8 类型 wire 题意整理 对于偶数分频电路，在不考虑时钟同步时钟延迟的问题时，直接使用D触发器级联来实现 题解主体 级联D触发器，可以得到状态转换： 关键在于，上升沿才能触发翻转，...
XilinxFPGA设计进阶提高篇
03-18
《XilinxFPGA设计进阶提高篇》是针对Xilinx FPGA设计的深入学习资料，旨在帮助工程师提升在FPGA领域的专业技能。Xilinx作为全球领先的可编程逻辑器件制造商，其FPGA产品广泛应用于通信、数据中心、汽车电子、消费...
写个时钟（行为篇）
Conan9912345的博客
06-26 980
通过对样式篇的源代码进行观察，我们会发现，只用一个div 元素做表盘，并使用对应的before和after两个伪元素做时针和分针，那么一共只能是三个元素。 需要显示秒针和表盘上的刻度，我们需要更多的元素来展示。那么今天，我们就把秒针和刻度显示出来，并且让时钟与真实的时间同步。
写个时钟（样式篇）
Conan9912345的博客
06-25 1003
最近总是感叹，时间过的好快啊！似乎随着地球自转速度的加快，咱们的时间也越来越快了。曾经，出门需要“伸手要钱”（伸，谐音身，指身份证；手，指手机；要，谐音钥，指钥匙，钱，指钱包）。现如今，只需要一部手机即可出门，无论是支付还是看时间，都是手机搞定。想到这里，突然好怀念以前的钟表，决定用前端写一个即将成为历史的时钟。时钟是一个典型的案例，我将会根据不同技术架构使用最基础的HTML和CSS构建一个时钟，只使用一个 DIV 元素，并使用CSS3 动画实现时钟走动的效果；通过。
Vivado从此开始（进阶篇）读书笔记——跨时钟处理
gzy0506的博客
07-12 4492
最近买了几本书，对知识进行细节方面查漏补缺，从0分到90分容易，从90分到95分难。主要记录一些自认为有用，但平时又没有用到的一些小知识点或者技巧，包括例如一些新奇的设计、一些忽略的报表分析或者约束等等，也许不关注这些东西，工程也能正常编译和使用，但为了更加精益求精，还是要广泛吸收其他人的一些总结和经验，才能不断进步。在异步跨时钟域场合，对于控制信号（通常位宽为1bit）常使用双触发器的方式完成跨时钟域操作。如图所示。对于图中标记的1和2的触发器，需要使用综合属性ASYNC_REG,其目的有两个：表明1触发
FPGA时序约束--进阶篇（衍生时钟约束）
mengzaishenqiu的博客
06-18 1638
本文将详细介绍衍生时钟约束和时钟分组约束设置，给出了详细的约束命令和示例介绍。
Java进阶篇--网络编程
m0_74293254的博客
09-29 241
常见的网络协议族包括TCP/IP（Transmission Control Protocol/Internet Protocol，传输控制协议/英特网互联协议）、UDP协议（User Datagram Protocol，用户数据报协议）、ICMP协议（Internet Control Message Protocol，Internet 控制报文协议）、HTTP、FTP、SMTP等。TCP在传输数据之前，需要在通信双方之间建立连接，保存对方的信息，并交换一些连接参数，这些参数通常包含在TCP头部中。
MySQL数据库进阶篇——主从同步与读写分离
Zzzzzz的博客
11-25 436
MySQL数据库进阶篇——主从同步与读写分离 主从同步 实验准备 总共四台虚拟机，一台应用端，一台amoeba，一台主服务器，一台从服务器 ​ 应用端： centos7-2（实验前已装MySQL） ​ amoeba： centos7-1（无MySQL） ​ 主服务器： centos7-3（实验前已装MySQL） ​ 从服务器： centos7-4（实验前已装MySQL） 主服务器设置 安装时间...
ABB机器人TASK功能进阶篇——机器人心跳
A567852的博客
03-06 938
在配置中配置一个机器人物理输出信号作为机器人心跳信号来使用（此处使用robotstudio进行配置）3、设置机器人心跳的频率，这边设置1s的评率对信号进行开闭，那我们信号的转化周期为2s。可见配置对应的机器人心跳io以1s的评率进行开闭。创建一个用于后台task工程使用的时钟变量。创建一个num变量来读取时钟变量里的值。2、读出当前时间变量内部的值。1、添加一个开始时钟的指令。
【进阶篇】2.13 Redis 高可用主从详解
日拱一卒无有尽，功不唐捐终入海
06-23 703
Redis是一个高性能的键值存储系统，广泛应用于Web应用、缓存、消息队列等领域。在实际应用中，为了保证Redis的高可用性，通常需要使用主从复制来进行数据备份和故障转移。本文将介绍Redis主从复制的概念、原理和实现方式，以及主从复制中的一些问题和解决方案。主从复制是指将一个Redis实例（主服务器）的数据复制到其他Redis实例（从服务器）的过程。主服务器将自己的数据变化通过网络发送给从服务器，从服务器接收到数据后进行更新，从而保证从服务器的数据和主服务器的数据保持一致。
哪吒学Python-进阶篇_目录1
08-03
《哪吒学Python-进阶篇》是一本针对11岁以上中小学生设计的Python编程教材，旨在教授初级的类与面向对象编程技术。本书通过一系列生动有趣、寓教于乐的项目，帮助学生深入理解编程的基本概念，提升他们的编程技能。 ...
2021春招C#.NET笔试题高级进阶篇.pdf
03-19
在当前的软件开发领域中，C#.NET的高级进阶知识点是软件工程师必备的技能，尤其在面试中，对这些知识点的理解深度往往能决定一个人的职位等级。本文将基于提供的文件内容，详细解释每个问题所涉及的知识点。 首先，...
SHIZHONG.rar_时钟
09-20
本篇将详细讲解如何使用VB来开发一个简单的时钟程序。 1. **VB基础知识** - VB界面：VB采用的是事件驱动编程模式，通过拖拽控件到窗体上，设置属性和编写事件代码来实现功能。 - 控件：在VB中，时钟程序通常会...
CPU 那些事-之菜鸟进阶篇
11-24
但要注意，时钟频率并非决定性能的唯一因素，现代CPU采用多核技术，通过多个处理核心并行处理任务，同样可以显著提升性能。 多核CPU的出现，让我们理解了线程和超线程的概念。线程是操作系统调度的基本单位，一个...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 632
ASP.NET Core Web API 使用Autofac框架
JAVA-WEB资源配置
最新发布
caryeko的专栏
08-15 124
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 196
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
vivado 从此开始 进阶篇 pdf
08-02
Vivado是一种由Xilinx开发的集成设计环境，主要用于FPGA芯片的设计和开发。"Vivado从此开始 进阶篇"是一本针对已经熟悉Vivado基本操作的用户的进阶学习资料，旨在帮助用户深入了解Vivado的更高级功能和使用技巧。 "Vivado从此开始 进阶篇"提供了丰富的实践案例和详细的操作指导，使用户能够更好地掌握Vivado的高级设计技巧。它包含了诸如时钟和时序约束、高级布局和布线技巧、逻辑优化和系统集成等内容。 时钟和时序约束是FPGA设计中非常重要的一部分，能够保证设计的正确性和稳定性。"Vivado从此开始 进阶篇"通过实例演示了如何正确地约束时钟和时序，包括设置时钟频率、时序路径等。 高级布局和布线技巧包括如何选择最佳的布局方式、减小信号路径的长度和延迟、优化布局和布线等。"Vivado从此开始 进阶篇"通过实例演示了如何使用Vivado的高级布局和布线功能，提高设计的性能。 逻辑优化和系统集成是优化设计的关键步骤。"Vivado从此开始 进阶篇"介绍了如何使用Vivado进行逻辑优化，包括使用优化指导工具、设置优化策略等。此外，它还介绍了如何进行系统集成，将各个模块进行连接和验证。 总之，"Vivado从此开始 进阶篇"是一本帮助用户更深入了解Vivado高级功能和使用技巧的学习资料。通过学习这本书，用户能够更好地应用Vivado进行FPGA设计和开发，并提高设计的准确性和性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值