web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
文章目录
- 前言
- 1、html部分
- 2、css部分
- 3、JavaScript部分
- 4、微信小程序演示
前言
哈哈
1、html部分
<div class="great_ultimate_eight_diagrams_box"><div class="eight_diagrams_box"><div class="eight_diagrams"><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">天乾</div><div class="direction">正南</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">风巽</div><div class="direction">西南</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">水坎</div><div class="direction">正西</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">山艮</div><div class="direction">西北</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">地坤</div><div class="direction">正北</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">雷震</div><div class="direction">东北</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">火离</div><div class="direction">正东</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div><div class="eight_diagrams_item"><div class="yin_yang"><div class="divinatory_direction_box"><div class="divinatory_name">泽兑</div><div class="direction">东南</div></div><div class="yy_box"><div class="yy_t"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_m"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div><div class="yy_b"><div style="flex: 3; background-color: #333;"></div><div style="flex: 1; background-color: #333;"></div><div style="flex: 3; background-color: #333;"></div></div></div></div></div></div></div><!-- 太极 --><div class="great_ultimate_box"><div class="great_ultimate"></div></div></div>
☺☺☺☺☺☺☺
关于
html
结构未做优化,望谅解!不过微信小程的代码已经优化好,有需要的伙伴可以私聊。对于页面结构就不做过多阐述,多看几下就明白了咋回事了。
2、css部分
.great_ultimate_eight_diagrams_box {display: flex;justify-content: center;align-items: center;animation: circularRotation linear infinite 30s;
}/* 八卦 */
.eight_diagrams_box {position: relative;
}.eight_diagrams {width: 410px;height: 410px;position: relative;display: flex;justify-content: center;align-items: center;
}.eight_diagrams_item {width: 100px;position: absolute;
}.yin_yang {width: 100%;height: 100%;text-align: center;
}.divinatory_name {/* 文字两端对齐 */text-align-last: justify;font-size: 20px;font-weight: 700;padding: 0 20px;
}.direction {margin-top: 2px;text-align-last: justify;padding: 0 10px;
}.yy_box {margin-top: 10px;display: flex;flex-direction: column;align-items: center;
}.yy_t,
.yy_m,
.yy_b {width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0;margin: 0;
}.yy_m {margin-top: 8px;
}.yy_b {margin-top: 8px;
}.yy_t div,
.yy_m div,
.yy_b div {width: 100%;height: 8px;
}/* 太极 */
.great_ultimate_box {position: absolute;
}.great_ultimate {width: 270px;height: 270px;border-radius: 50%;/* 圆球上半部分为白色,下半部分为黑色 */background: linear-gradient(to bottom,#ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);position: relative;transform: rotate(-90deg);
}.great_ultimate::before {position: absolute;content: "";width: 45.5px;height: 45.5px;border-radius: 50%;border: 45px solid #000000;/* 左侧黑球套白点 */background-color: #FFFFFF;left: 0;top: 50%;transform: translateY(-50%);
}.great_ultimate::after {position: absolute;content: "";width: 45.5px;height: 45.5px;border-radius: 50%;border: 45px solid #FFFFFF;/* 右侧白球套黑点 */background-color: #000000;right: 0;top: 50%;transform: translateY(-50%);
}@keyframes circularRotation {form {transform: rotate(0deg);}to {transform: rotate(360deg);}
}
☺☺☺☺☺☺☺
八卦图主要就是使用定位,通过
JavaScript
计算每一个div
的坐标,然后定位到指定位置即可。关于太极图可查看本篇文章了解详情。
3、JavaScript部分
function init() {let elItem = document.querySelectorAll('.eight_diagrams_item'),yin_yang = document.querySelectorAll('.yin_yang'),radius = document.querySelector('.eight_diagrams').clientWidth / 2,itemLen = elItem.length,pieceDeg = 360 / itemLen;for (let i = 0; i < itemLen; i++) {let t = i * pieceDeg,x = undefined,y = undefined;yin_yang[i].style.transform = `rotate(${t}deg)`;t = (Math.PI / 180) * t;x = Math.sin(t) * radius;y = -Math.cos(t) * radius;elItem[i].style.transform = `translate(${x}px, ${y}px)`;}
}init();
☺☺☺☺☺☺
定义名为
init
的函数,用来设置旋转元素的坐标。
通过querySelectorAll
获取一个元素类数组。
通过querySelector
和clientWidth
获取外层容器的宽度并除以2
得到半径。
通过querySelectorAll
获取内层元素的类数组,并使用yin_yang
变量保存。
定义itemLen
变量保存类数组长度。
通过类数组长度计算元素角度的平均值,并保存到pieceDeg
变量中。
使用for
循环计算出每个元素的x
和y
坐标,i * pieceDeg
得到角度值;(Math.PI / 180) * t
得到弧度值,因为编程中的sin
和cos
需要通过弧度才能计算出坐标值。
yin_yang[i].style.transform = 'rotate(' + t + 'deg)'
;
elItem[i].style.transform = 'translate(' + x + 'px', y + 'px)'
;
第一句代码设置元素的旋转角度;第二句话设置元素的坐标位置。以上两句话可以有更好的方式实现,但是在这里暂时不优化。
4、微信小程序演示
相关文章:
web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation
文章目录前言1、html部分2、css部分3、JavaScript部分4、微信小程序演示前言 哈哈 1、html部分 <div class"great_ultimate_eight_diagrams_box"><div class"eight_diagrams_box"><div class"eight_diagrams"><div class&…...
【LeetCode】33. 搜索旋转排序数组、1290. 二进制链表转整数
作者:小卢 专栏:《Leetcode》 喜欢的话:世间因为少年的挺身而出,而更加瑰丽。 ——《人民日报》 目录 33. 搜索旋转排序数组 1290. 二进制链表转整数 33. 搜索旋转排序数组 33. 搜索旋转排序…...
IBM Semeru Windows 下的安装 JDK 17
要搞清楚下载那个版本,请参考文章:来聊聊 OpenJDK 和 JVM 虚拟机下载地址semeru 有认证版和非认证版,主要是因为和 OpenJ9 的关系和操作系统的关系而使用不同的许可证罢了,本质代码是一样的。在 Windows 下没有认证版,…...
Lambda表达式和steram流
目录 引言: 语法: Lambda 表达式实例: demo演示: Stream流: 引言: Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性。 Lambda 允许把函数作为一个方法的参数(函…...
面试必会-MySQL篇
1. Mysql查询语句的书写顺序Select [distinct ] <字段名称>from 表1 [ <join类型> join 表2 on <join条件> ]where <where条件>group by <字段>having <having条件>order by <排序字段>limit <起始偏移量,行数>2. Mysql查询语…...
Hadoop入门常见面试题与集群时间同步操作
目录 一,常用端口号 Hadoop3.x : Hadoop2.x: 二,常用配置文件: Hadoop3.x: Hadoop2.x: 集群时间同步: 时间服务器配置(必须root用户): (1)…...
JS 数组去重的方法
// 数组去重 const arr ["1", "1", "2", "3", "5", "3", "1", "5", "4"] console.log(this.deduplicate(arr)) // [1, 2, 3, 5, 4] // 数组对象去重 const arr [ { id: 1, nam…...
PMP项目管理项目沟通管理
目录1 项目沟通管理2 规划沟通管理3 管理沟通4 监督沟通1 项目沟通管理 项目沟通管理包括通过开发工件,以及执行用于有效交换信息的各种活动,来确保项目及其相关方的信息需求得以满足的各个过程。项目沟通管理由两个部分组成:第一部分是制定…...
2.JVM常识之 运行时数据区
1.JVM核心组成 2.JVM 运行时数据区(jdk8) 程序计数器:线程私有,当前线程所执行字节码的行号指示器 jvm栈:线程私有,Java 虚拟机栈为 JVM 执行 Java 方法服务 本地方法栈:线程私有,本…...
你的游戏帐号是如何被盗的
据报道,2022上半年,中国游戏市场用户规模达到了5.54亿人,游戏市场销售收入1163.1亿元,相较去年均为同比增长的情况。如此庞大的市场规模,黑色产业链是绕不开的话题。 但相较于游戏中大家常见的玩家与玩家、玩家与官方…...
C++11异步编程
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言1、std::future和std::shared_future1.1 std:future1.2 std::shared_future2、std::async3、std::promise4、std::packaged_task前言 C11提供了异步操作相关的类…...
20230310----重返学习-DOM元素的操作-时间对象-定时器
day-024-twenty-four-20230310-DOM元素的操作-时间对象-定时器 复习 获取元素 id document.getElementById() 类名 document.getElementsByClassName() 标签名 document.getElementsByTagName() name属性 document.getElementsByName() 选择器 document.querySelector()docum…...
江苏专转本转本人后悔排行榜
江苏专转本转本人后悔排行榜 一、复习的太迟: 后悔指数:五颗星。 复习越到最后,时间一天天变少,要复习的内容还有很多,很多人都后悔没有早早开始,总想着多给我两月一定会考上的。 担心时间不够用,那就努力利…...
【算法时间复杂度】学习记录
最近开算法课,开几篇文章记录一下算法的学习过程。 关于算法的重要性 学习计算机当程序员的话,在编程过程中是绕不开算法这个大矿山的,需要我们慢慢挖掘宝藏。 算法(Algorithm)是指用来操作数据、解决程序问题的一组…...
汽车车机芯片Linux系统内核编译问题总结
谈到车机,很多人会想到华为问界上装的大屏车机,号称车机的天花板,基于鸿蒙OS的,而今天谈到的车机芯片用的是linux内核Kernel,对于它的编译,很多人一时会觉得头大,的确如果工具不是很齐全,就会遇到这样那样的问题,但是过程都会有错误提示,按照错误提示基本可以解决,而…...
Android13 音量曲线调整
Android13 音量曲线调整 Android13 上配置文件的路径: /vendor/sprd/modules/audio/engineconfigurable_apm/工程目录/system/etc/audio_engine_config/audio_policy_engine_stream_volumes.xml /vendor/sprd/modules/audio/engineconfigurable_apm/工程目录/sys…...
OpenHarmony通过MQTT连接 “改版后的华为IoT平台”
一、前言 本篇文章我们使用的是BearPi-HM_Nano开发板:小熊派的主板+E53_IA1扩展板 源码用的是D6_iot_cloud_oc,点击下载BearPi-HM_Nano全量源码 那么为什么要写这篇呢? 前段时间看到OpenHarmony群里,经常有小伙伴问接入华为IoT平台的问题,他们无法正常连接到华为IoT平台等…...
SQS (Simple Queue Service)简介
mazon Simple Queue Service (SQS)是一种完全托管的消息队列服务,可以让你分离和扩展微服务、分布式系统和无服务应用程序。 在讲解SQS之前,首先让我们了解一下什么是消息队列。 消息队列 还是举一个电商的例子,一个用户在电商网站下单后付…...
高速PCB设计指南系列(三)
第一篇 高密度(HD)电路的设计 本文介绍,许多人把芯片规模的BGA封装看作是由便携式电子产品所需的空间限制的一个可行的解决方案,它同时满足这些产品更高功能与性能的要求。为便携式产品的高密度电路设计应该为装配工艺…...
【C++】C++11——左右值|右值引用|移动语义|完美转发
文章目录一、左值与右值1.概念2.引用3.注意二、右值引用的意义1.左值引用意义2.右值引用和移动语义3.容器新增三、万能引用四、完美转发一、左值与右值 1.概念 左值是什么?右值是什么? 左值是一个表示数据的表达式(如变量名或解引用的指针&…...
[ROC-RK3399-PC Pro] 手把手教你移植主线Buildroot(基于2023.02-rc3版本)
🍇 博主主页:Systemcall小酒屋🍇 博主简介:Neutionwei,C站嵌入式领域新星创作者之一,一枚热爱开源技术、喜欢分享技术心得的极客,注重简约风格,热衷于用简单的案例讲述复杂的技术&am…...
重温线性代数
前言 对于普通的数学工作者而言,掌握矩阵、线性空间的基本性质和用法比领会抽象的概念更实用。数学专业的同学需要全面深入学习近世代数的理论和演绎法则,例如模的概念和运算。 总之,我个人认为,不论是微积分、还是线性代数&…...
2023河北沃克HEGERLS甘肃金昌重型仓储项目案例|托盘式四向穿梭车智能密集存储系统在工业行业的创新应用
项目名称:自动化仓储托盘式四向穿梭车智能密集立体库项目 项目合作客户:甘肃省金昌市某集团企业 项目施工地域:甘肃省金昌市 设计与承建单位:河北沃克金属制品有限公司(自主品牌:海格里斯HEGERLS&#x…...
软件测试的案例分析 - 闰年5
文章目的 显示不同的博客能获得多少博客质量分 (这是关于博客质量分的测试 https://www.csdn.net/qc) 这个博客得了 83 分。怎么才能得到更多分数? 正文 我们谈了不少测试的名词, 软件是人写的, 测试计划和测试用例也是人写的, 人总会犯错误。错误发生…...
Linux文件基础I/O
文件IO文件的常识基础IO为什么要学习操作系统的文件操作C语言对于函数接口的使用接口函数介绍如何理解文件文件描述符重定向更新给模拟实现的shell增加重定向功能为什么linux下一切皆文件?文件的常识 1.空文件也要在磁盘占据空间 2.文件 内容 属性 3.文件操作 对…...
HTML看这一篇就够啦,HTML基础大全,可用于快速回顾知识,面试首选
HTML 1 基础 1.1 DOCTYPE <!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。 <!DOCTYPE html> 这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页. 注意: 声明位于文档中的最前面的位置,处于 标签之前。 …...
Altium Designer(AD)软件使用记录05-PCB叠层设计
目录Altium Designer(AD)软件使用记录05-PCB叠层设计一、正片层和负片层的介绍1、正片层(Signal)2、负片层(Plane)3、内电层的分割实现二、正片层和负片层的内缩设计1、负片设置内缩20H原则2、正片铺铜设置内缩1、设置规则2、重新铺铜三、AD的层叠设计四、叠层设计需要注意的问…...
ArcGIS动态表格批量出图
一.产品介绍:ArcGIS动态表格扩展模块Mapping and Charting Solutions,可用于插入动态表格,与数据驱动结合,出图效率无敌。注:优先选择arcgis10.2.2。 二、下载连接: https://www.xsoftnet.com/share/a001CX…...
ChatGPT真神奇,但是也真焦虑
ChatGPT火爆ChatGPT的火爆程度不用说也知道。就目前来说,已经开始冲击各行业了,比如客服、智能助手、语言学习、自然语言处理等等等。。ChatGPT冲击冲击最高的可能就是中间这个段位的了。高段位无法取代,但是低段位,通过使用ChatG…...
mos管驱动与米勒平台介绍、消除
mos驱动设计 1.选择适当的驱动芯片 为了控制MOSFET,需要使用专门的驱动芯片。选择合适的芯片需要考虑MOSFET的电压和电流需求。常见的驱动芯片包括IR2110、IR2184、MIC4424等。 2.设计电路 在驱动电路中,需要加入一些电路元件来保证MOSFET的顺畅工作…...
20230311英语学习
Philosophy of Food: Guidelines for an Authentic Approach to Eating 饮食哲学:值得思考的问题 Whats Philosophical About Food? Philosophy of food finds its basis on the idea that food is a mirror.Eating mirrors the making of a self, that is, the …...
【面试题】Nginx面试题汇总(无解答)
什么是Nginx?谈谈个人都理解,项目中是否用到,为什么要用,有什么优点?为什么要用Nginx?为什么Nginx性能这么高?Nginx怎么处理请求的?什么是正向代理和反向代理?使用“反向…...
Java面试总结(六)
进程和线程的区别 根本区别: 进程时操作系统资源分配的基本单位,而线程是处理器任务调度和执行的基本单位。 资源开销: 每个进程都有自己独立的代码和数据空间(程序上下文),进程之间的切换开销比较大&…...
Windows逆向安全(一)C与汇编的关系
前言 逆向是一种新型的思维模式也是软件开发领域中极为重要的技术,涵盖各种维度去深挖软件架构的本质和操作系统原理,学习逆向后可以在各领域中发挥至关重要的作用,其中包括黑灰色,安全开发,客户端安全,物…...
Lazada、Allegro、速卖通测评自养号技术(方法解析)
无论是亚马逊、拼多多Temu、shopee、Lazada、wish、速卖通、煤炉、敦煌、雅虎、eBay、TikTok、Newegg、乐天、美客多、阿里国际、沃尔玛、OZON、Joom、Facebook、Coupang、独立站、Cdiscount、Kaufland、DARTY、Allegro、MANO等平台测评自养号对于卖家来说算是一种低成本、高回…...
Vue3的composition API—setup函数, ref函数,reactive函数
1、Setup 函数 1.setup 是vue3中的一个配置项 2、setup是所有组件所需要的数据和方法都需要配置到setup中的 3、setup两种返回值: 若返回一个对象 若返回一个渲染函数 mian.js文件 注意:尽量不与Vue2混用 setup中无法访问vue2中的配置 不能是async函数…...
国外seo比较好的优化方法有哪些?
随着互联网的不断发展,SEO(搜索引擎优化)变得越来越重要。 对于国外市场,Google搜索引擎是最为重要的搜索引擎之一, 因此在优化国外网站时,需要将Google SEO优化作为首要任务。 关键词研究和优化 在进行…...
【JavaEE进阶】——第一节.Maven国内源配置
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 操作步骤 1.打开项目配置界面(当前项目配置) 2.检查并配置国内源 3.再次打开项目配置界面(新项目配置) 4…...
dockerFile编写
dockerFile编写 语法参数 # DockerFile常用指令 USER # 指定运行的用户,一般不用配置 FROM # 拉取基础镜像,一切从这里开始构建 ARG # 构建参数,只能在dockerFile中使用, # eg: JAR_FILEtarget/springboot-mongo-0.0.1-SNAPSHOT.jar MAI…...
jenkins扩展你的流水线
文章目录一、概述二、可信库和不可信库可信库不可信库三、内部库与外部库内部库SSH访问HTTP 访问外部库配置一个外部库四、在流水线脚本中使用库从源码版本控制中自动下载库加载库到脚本中Library 注解库步骤库指令五、Jenkins 项目中的库范围六、共享库代码的结构src示例一&am…...
Golang模糊测试入门
本教程介绍了 Go 中模糊测试的基础知识。通过模糊测试,随机数据会针对您的测试运行,以试图找到漏洞或导致崩溃的输入。可以通过模糊测试发现的一些漏洞示例包括 SQL 注入、缓冲区溢出、拒绝服务和跨站点脚本攻击。 在本教程中,您将为一个简单的函数编写模糊测试,运行 go 命…...
ARM uboot 的移植4 -从 uboot 官方标准uboot开始移植
一、添加DDR初始化1 1、分析下一步的移植路线 (1) cpu_init_crit 函数成功初始化串口、时钟后,转入 _main 函数,函数在 arch/arm/lib/crt0.S 文件中。 (2) 在 crt0.S 中首先设置栈,将 sp 指向 DDR 中的栈地址; #if defined(CONF…...
不用索引怎么优化百亿数据? | MySQL性能优化篇
文章目录数据库调优一、数据库调优原理1.1 为什么要进行MySQL数据库调优?1.2 什么影响数据库性能?1.3 数据库调优到底调什么?二、数据库压力测试2.1 什么是压测?2.2 JMeter简介2.3 驱动下载2.4 测试过程三、连接池3.1 压力测试连接…...
JavaScript(WebAPI)
目录 1.什么是Web API? 2.DOM和DOM树 3.获取元素 4.事件 5.操作元素 获取/修改元素内容 1.innerText 2. innerHTML 获取/修改元素属性 获取/修改表单元素属性 获取/修改样式属性 1.修改内联样式 2.修改元素应用的CSS类名 6.操作节点 新增节点 删除节点 7.案例…...
idea集成GitHub
设置 GitHub 账号绑定账号有两种方式:1. 通过授权登录2.如果上述登录不成功,用Token口令的方式登录,口令在github账号哪里生成,点击settings --->Developer settings --->pwrsonal access tokens ----> 复制口令到idea 口…...
软考高级信息系统项目管理师系列之四十一:项目组合管理
软考高级信息系统项目管理师系列之四十一:项目组合管理 一、项目组合管理内容二、项目组合管理基础概述1.项目组合定义及相关知识图2.项目组合、项目集和项目之间的关系3.项目组合模块具备的特征三、项目组合管理1.项目组合管理定义及要求2.不同级别管理之间的特性及关联3.项目…...
Spring——Spring整合Mybatis(XML和注解两种方式)
框架整合spring的目的:把该框架常用的工具对象交给spring管理,要用时从IOC容器中取mybatis对象。 在spring中应该管理的对象是sqlsessionfactory对象,工厂只允许被创建一次,所以需要创建一个工具类,把创建工厂的代码放在里面&…...
【专项训练】布隆过滤器和LRU缓存
布隆过滤器:与哈希表类似 哈希表是一个没有误差的数据结构! 有哈希函数得到index,会把要存的整个元素放在哈希表里面 有多少元素,每个元素有多大,所有的这些元素需要占的内存空间,在哈希表中都要找相应的内存大小给存起来 事实上,我们并不需要存所有的元素本身,而是只…...
从一道面试题看 TCP 的吞吐极限
分享一个 TCP 面试题:单条 TCP 流如何打满香港到旧金山的 320Gbps 专线?(补充,写成 400Gbps 更具迷惑性,但预测大多数人都会跑偏,320Gbps 也就白给了) 这个题目是上周帮一个朋友想的,建议他别问三次握手&a…...
rsync 的用法
rsync 介绍下 用法 rsync是一个常用的数据同步工具,它能够在本地和远程系统之间同步文件和目录。以下是rsync的基本用法: 同步本地文件夹: bash Copy code rsync -av /path/to/source /path/to/destination其中,-a表示归档模式&…...