工作中偶尔就会遇到后端同学丢来一个列表，要我们自己组装成一个树结构渲染到页面上，本文以两种不同方式探索生成树的算法思想。...背景介绍 可组装成树结构的数组一般有以下几个要素： id 当前节点id parentId 当前节点的父节点id children 子节点列表（可能不会在接口中返回，需要组装时候自己加上） 原始结构：...目标结构： 关键就是一维数组中通过parentId找到其对应的父节点并添加到父节点的children数组中。...实现方案 最直接的方式就是遍历数组，并把找到的子节点逐一添加到父节点中 function listToTreeSimple(data) { const res = []; data.forEach...// * 当前项没有父节点 -> 顶层 parentList.push(item); } }); return parentList; } 即便数据量很小，带来的性能提升也是显著的
本文编程笔记首发 在网站需要显示的页面添加上代码即可 <!
本文编程笔记首发 📷 <html> <head> <style type="text/css"> * {margin:0px; padiing:0px;} .l...
今天给大家分享一个用原生JS实现的好看计数器，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 原生JS...实现一个好看计数器 * { font-family: '微软雅黑', sans-serif; box-sizing
好看的按钮 .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid...="this.className='btn1_mouseout'" title="好看的按钮">好看的按钮 <button class=btn1_mouseout...onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮... 好看的按钮 好看的按钮 好看的
好看的动态时钟,觉得挺好看的,可自行修改时间颜色,需要的可自行添加美化自己博客！...使用教程 下载JS文件上传至服务器根目录下 如果是wordpress,将下面代码复制至外观→小工具→自定义HTML文本中 像我这种typecho的或者其他的博客系统，自行放在合适的位置即可，颜色参考点我选择...canvas" style="width:100%;" height="250"><script src="https://web-static.q6q.cc/files/new/clock.<em>js</em>
本文要点在于Python扩展库matplotlib的text()方法与annotate()的使用。...1, figsize=(8,8)) ax = plt.subplot(111) def drawNode(text, startX, startY, endX, endY, ann): #绘制带箭头的文本
一个节点的所有子孙都有相同的前缀，也就是这个节点对应的字符串，而根节点对应空字符串。一般情况下，不是所有的节点都有对应的值，只有叶子节点和部分内部节点所对应的键才有相关的值。...每一个完整的英文单词对应一个特定的整数。Trie可以看作是一个确定有限状态自动机，尽管边上的符号一般是隐含在分支的顺序中的。...它的优点是：利用字符串的公共前缀来减少查询时间，最大限度地减少无谓的字符串比较，查询效率比哈希树高。...Trie树性质 它有3个基本性质： 根节点不包含字符，除根节点外每一个节点都只包含一个字符； 从根节点到某一节点，路径上经过的字符连接起来，为该节点对应的字符串； 每个节点的所有子节点包含的字符都不相同...实现方法 搜索字典项目的方法为： (1)从根结点开始一次搜索； (2) 取得要查找关键词的第一个字母，并根据该字母选择对应的子树并转到该子树继续进行检索； (3) 在相应的子树上，取得要查找关键词的第二个字母
prettier 的优势也很明显，它支持 HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE 等主流文件格式。...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码，像下面这样子的： { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode.../xxx.js 当然，默认的配置规则是不符合我们的需求的，我们需要自定义配置规则。...toml格式的时候，后缀是必须的） prettier.config.js 或者 .prettierrc.js，需要返回一个对象 package.json 文件中加上"prettier"属性 每种文件的书写格式如下...{ts,js,css,json}' 我们一般使用这种方式的时候，就把这个配置文件写在项目根路径下，然后使用命令行一次性格式化项目下的所有文件。
0919自我总结 常见的鼠标hover效果 展示效果:http://ianlunn.github.io/Hover/ 部分动画制作 <!...curl-bottom-left:hover:before { width: 15px; height: 15px; } --> 对于的效果都以备注...使用 拿pulse为例子 导入上述的方法 全是再样式中操作 @keyframes pulse { 25% { transform: scale(1.1); }...animation-name: pulse; #方法名称 animation-duration: 1s; #方法时间 animation-timing-function: linear; #从开头到结尾以相同的速度来播放动画...animation-iteration-count: infinite; #动画的次数 } 参考文档'https://www.w3school.com.cn/cssref/index.asp#
在上周的[[3.0 颜色选择]]当中，提到了几个用来选择颜色的工具。这里我们就对这些工具进行一下简单的介绍。...色轮 在这个色轮当中，可以基于自己的目的来选择合适的颜色。同时在工具的左侧有一个颜色选择的分类。我们可以先选择想要颜色的颜色分类。然后再转动色轮即可。 2....DESIGN SEEDS DESIGN SEEDS (https://www.design-seeds.com/) 是一个通过现实生活中的照片来提取的一些好看的配色。...在这个网站里面，一些好看的照片提取的配色。...在 COOLRS 可以生成随机的配色方案，同时也可以查看之前一些好看的配色方案 点击网页上的 Explore 可以查看一些定义好的配色方案 在每一个配色方案当中，可以查看具体的颜色代码。
网页安全色有216中，但支持颜色名称作为颜色值的只有16种，分别是aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,...然而这16种Web自带的标准色看上去是极为「老土」的，几乎没有设计师愿意去使用，在这里为大家分享16 种更好看的 WEB 默认标准色：colors.css，颜色变好看了，而且已有写好的 CSS 样式文件...老的web标准色值： 通过以上两组对比，可以看出colors.css的颜色值更适合现时的 WEB UI 设计。 样式表中除了有文字颜色值外，还有已写好的背景色和边框色。...SVG 填充 SVG Strockes 网站中还有PS用的.aco和AI用的 .ase文件，喜欢的可以到官方网站上下载。...网站名称：Colors.css Related Posts 白嫖SSL证书部署（结合宝塔）SSL证书是数字证书的一种，类似于驾驶证、护照和营业执照的电子副本。
ubuntu linux用了很久，可是对终端下的字体一直不是很满意，今天终于找到了一些比较好看的终端字体，尤其是droid sans mono字体，简直爱死了，linux迷在ubuntu下一直用的就是这款字体...，很漂亮，极力推荐这几款漂亮的字体: 1.
本文告诉大家一个好用的网站，里面提供很多好看的图标。 本文介绍的网站是 Xamalot 里面有很多好看的图标。...例如我找到了一个好看的图标 我只需要点击下面的下载就可以了 推荐使用 Brush 的方式，或者直接 Canvas 的方式。...有大神说，显示图片的性能会比显示 Brush Path 好，但是显示图片需要关注dpi等，而且作为静态的资源，实际上 Brush 占用内存和图片是不能直接相比的。...3577c503-c4a3-477a-8204-e33f6739c196 这个图标 点击了 Brush 然后点击 Download XAML Brush as text 可以看到有很多代码，把他复制放在 Grid 的资源
本文告诉大家一个好用的网站，里面提供很多好看的图标。 本文介绍的网站是 Xamalot 里面有很多好看的图标。 例如我找到了一个好看的图标 ? 我只需要点击下面的下载就可以了 ?...推荐使用 Brush 的方式，或者直接 Canvas 的方式。...有大神说，显示图片的性能会比显示 Brush Path 好，但是显示图片需要关注dpi等，而且作为静态的资源，实际上 Brush 占用内存和图片是不能直接相比的。...3577c503-c4a3-477a-8204-e33f6739c196 这个图标 点击了 Brush 然后点击 Download XAML Brush as text 可以看到有很多代码，把他复制放在 Grid 的资源
self.dot = Digraph(comment='Binary Tree') def create_BTree_By_List(array): i = 1 # 将原数组拆成层次遍历的数组...，每一项都储存这一层所有的节点的数据 level_order = [] sum = 1 while sum < len(array): level_order.append...i *= 2 sum += i level_order.append(array[i - 1:]) # BTree_list: 这一层所有的节点组成的列表...# forword_level: 上一层节点的数据组成的列表 def Create_BTree_One_Step_Up(BTree_list, forword_level):...level_order[0][0]) else: BTree_list = [BTree(elem) for elem in level_order[-1]] # 创建最后一层的节点列表
简介 高考是每个学生都会经历的一次重要考试，它标志着一个人学业的结束和新的人生阶段的开始。为了庆祝高考的临近，我设计了一个令人兴奋和有趣的倒计时网页，旨在为学生们带来欢乐和动力。...视频展示 视频展示 图片展示 背景和设计 网页采用了黑色到深灰色的全屏背景渐变效果，为整个页面营造了一种庄重而神秘的氛围。这种色彩选择既代表了高考的严肃性，又给人一种期待和紧张的感觉。...当页面加载时，祝福语句会以淡入的方式出现，给学生们带来温暖和鼓励。这些祝福语句包含了一些常见的祝福和加油的话语，希望学生们能够保持积极的心态和高昂的士气。...学生们可以在输入框中输入他们希望考入的院校名称，然后点击计算按钮。网页会以幽默的方式告诉他们考入该院校的几率为100%！...通过清晰的倒计时时钟、祝福语句的出现和下雪背景效果，我希望能够为学生们营造一个积极向上的学习氛围，让他们在高考的日子里感到兴奋和自信。
效果看这里： 迷幻紫 西瓜红 天空之境 小宇宙 撖榄绿 小太阳 优雅紫 深邃黑 无边框 直接放在后台自定义css即可 #zm_mhz,#zm_xgh,#zm...
开始 效果图 📷 代码 html部分 <input type="text" name="id" requi...1.6K30
无论是产品设计还是读书笔记，制作颜值高且规范的图表能够将关键信息清晰传达给你的团队成员、读者与客户。...Diagrams.net样式元素丰富，支持多种的嵌入与导出格式，能够满足各行各业的探索者绘制图表的需求。...在iThoughts中，你可以让每个单独的节点复制为Markdown，URL链接，导出为闪卡以及丰富多样的格式，推荐体验。...等各种丰富类型的图。...值得一提的是，幕布社区有丰富的模板资源与读书笔记，是一处值得探索的信息地。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
云直播
对象存储
