原生js制作svg 图标生成动态 tab栏切换效果(结尾附代码)

svg 图标生成动态 tab 栏

先看效果：
请添加图片描述

我想做一个 tab 栏比较美观的效果，当然切换的数据可以自己做一下，这里不演示，说一下特效如何制作。
当我点击时要将空心变为实心的这么一个效果，所以准备两个五角星样式一个是空的一个是实心的 svg 图片
请添加图片描述

请添加图片描述

结构大致是这样
请添加图片描述

首先需要一个父元素可以定义一个标签

<div id="star"></div>

#star {display: flex;margin: 0 auto;width: 1400px;
}#star div p {text-align: center;font-size: 36px;font-weight: bold;
}#star div svg {width: 50px;
}#star div {position: relative;padding-top: 25px;box-sizing: border-box;
}path {width: 48px;height: 46px;
}#star div::after {content: "";width: 2px;height: 70px;position: absolute;top: -30px;transform: translate(-50%, 0);left: 50%;
}#star div:nth-child(6n + 1) {padding-top: 5px;
}#star div:nth-child(6n + 1)::after {height: 50px;
}#star div:nth-child(6n + 2) {padding-top: 15px;
}#star div:nth-child(6n + 2)::after {height: 60px;
}#star div:nth-child(6n + 3) {padding-top: 25px;
}#star div:nth-child(6n + 3)::after {height: 70px;
}#star div:nth-child(6n + 4) {padding-top: 35px;
}#star div:nth-child(6n + 4)::after {height: 80px;
}#star div:nth-child(6n + 5) {padding-top: 45px;
}#star div:nth-child(6n + 5)::after {height: 90px;
}

然后就是需要一个数组里面存放文字，颜色，填充色以及描边的阴影，我这里用六个色调为一组，如果自己想设置什么颜色或者想要每个不同可以自行考虑更换

const colorList = [{ color: "#FECB16", bgc: "#FBDC19", name: "A", rgba: "253,202, 48,.5" },{ color: "#F85711", bgc: "#F85711", name: "B", rgba: " 246, 85, 33,.5" },{ color: "#CD15FA", bgc: "#CD15FA", name: "C", rgba: "204, 27,247,.5" },{ color: "#1DA5FC", bgc: "#1DA5FC", name: "D", rgba: " 35,165,251 ,.5" },{ color: "#4CC74E", bgc: "#4CC74E", name: "E", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "F", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "E", rgba: "253,202, 48,.5" },{ color: "#F85711", bgc: "#F85711", name: "F", rgba: " 246, 85, 33,.5" },{ color: "#CD15FA", bgc: "#CD15FA", name: "G", rgba: "204, 27,247,.5" },{ color: "#1DA5FC", bgc: "#1DA5FC", name: "H", rgba: " 35,165,251 ,.5" },{ color: "#4CC74E", bgc: "#4CC74E", name: "I", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "G", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "K", rgba: "253,202, 48,.5" },{ color: "#F85711", bgc: "#F85711", name: "L", rgba: " 246, 85, 33,.5" },{ color: "#CD15FA", bgc: "#CD15FA", name: "M", rgba: "204, 27,247,.5" },{ color: "#1DA5FC", bgc: "#1DA5FC", name: "N", rgba: " 35,165,251 ,.5" },{ color: "#4CC74E", bgc: "#4CC74E", name: "O", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "P", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "Q", rgba: "253,202, 48,.5" },{ color: "#F85711", bgc: "#F85711", name: "R", rgba: " 246, 85, 33,.5" },{ color: "#CD15FA", bgc: "#CD15FA", name: "S", rgba: "204, 27,247,.5" },{ color: "#1DA5FC", bgc: "#1DA5FC", name: "T", rgba: " 35,165,251 ,.5" },{ color: "#4CC74E", bgc: "#4CC74E", name: "V", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "W", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "X", rgba: "253,202, 48,.5" },{ color: "#F85711", bgc: "#F85711", name: "Y", rgba: " 246, 85, 33,.5" },{ color: "#CD15FA", bgc: "#CD15FA", name: "Z", rgba: "204, 27,247,.5" },
];

2. 创建遍历<div>元素，并添加到#star父级中。

colorList.forEach((item, index) => {const header = document.getElementById("star");header.appendChild(div);
});

请添加图片描述

3. 生成 svg 并添加到创建的div元素中

const createSvg1 = (color, name, rgba) => {return (svg1 = `<svg  t="1718699912553" class="icon " viewBox="0 0 1024 1024" version="1.1" p-id="2197" width="64" height="64" style="filter: drop-shadow(0 0 3px rgba(${rgba}));"><path d="M512 181.12l83.626667 169.386667a85.333333 85.333333 0 0 0 64 46.72l187.093333 27.306666-135.466667 131.84a85.333333 85.333333 0 0 0-24.533333 75.733334l31.786667 186.24-167.253334-87.893334a85.333333 85.333333 0 0 0-79.36 0l-167.466666 87.893334 32-186.24a85.333333 85.333333 0 0 0-24.533334-75.733334L177.066667 424.32l186.88-27.093333a85.333333 85.333333 0 0 0 64-46.72L512 181.12m0-42.666667a42.666667 42.666667 0 0 0-38.4 23.68l-83.626667 169.386667a42.666667 42.666667 0 0 1-32.213333 23.466667L170.666667 382.08a42.666667 42.666667 0 0 0-23.466667 72.96l135.253333 132.053333a42.666667 42.666667 0 0 1 12.373334 37.76L262.826667 810.666667a42.666667 42.666667 0 0 0 42.666666 50.133333 43.733333 43.733333 0 0 0 20.053334-5.12L492.16 768a42.666667 42.666667 0 0 1 39.68 0l167.253333 87.893333a43.733333 43.733333 0 0 0 20.053334 5.12 42.666667 42.666667 0 0 0 42.666666-50.133333l-32-186.24a42.666667 42.666667 0 0 1 12.373334-37.76l135.253333-132.053333A42.666667 42.666667 0 0 0 853.333333 382.08l-186.88-27.093333a42.666667 42.666667 0 0 1-32.213333-23.466667L550.4 162.133333A42.666667 42.666667 0 0 0 512 138.453333z" p-id="2198" fill="${color}"></path></svg><p>${name}</p>`);
};

其中filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)}));是用来做五角星发光的边框阴影

colorList.forEach((item, index) => {const star = document.getElementById("star");const div = document.createElement("div");div.innerHTML = createSvg1(item.color, item.name, item.rgba);star.appendChild(div);
});

请添加图片描述

请添加图片描述

接下来就是做竖着的线条的颜色根据字母改变，这里使用伪类after去做，网上也查了关于改变伪类的方法，结果不是很不理想，我们这里直接跳过，直接说一下如何动态改变伪类

  1. 首先需要定义一个空字符串
  2. 通过给 div 添加不同的类名，把样式渲染到 style 标签中
<style id="diycss"></style>

let stylelist = "";
let stylelist = "";
colorList.forEach((item, index) => {const star = document.getElementById("star");const div = document.createElement("div");//   给每个div添加后缀为索引的类名div.classList.add("c" + index);div.innerHTML = createSvg1(item.color, item.name, item.rgba);star.appendChild(div);//   使用字符串拼接方式拼接after伪类样式stylelist += ".c" + index + "::after{background-color:" + item.color + "}";
});
// 把拼接好的样式渲染到style标签里
document.querySelector("#diycss").innerHTML = stylelist;

这样基本样式就完成了
请添加图片描述

二、实现交互

先循环遍历点击事件

let divs = document.querySelectorAll("#star div");
for (let i = 0; i < divs.length; i++) {const element = divs[i];element.addEventListener("click", function () {...});
}

创建一个变量 selectedIndex为-1，用来记录当前选中的索引

let selectedIndex = -1;

首先检查 selectedIndex 是否等于-1，如果不等于-1，那么将 divs[selectedIndex]的 innerHTML 设置为函数里的createSvg1()并携带参数colorList[selectedIndex].color, colorList[selectedIndex].name, colorList[selectedIndex].rgba。

 let selectedIndex = -1;let divs = document.querySelectorAll('#star div');for (let i = 0; i < divs.length; i++) {const element = divs[i];element.addEventListener('click', function () {if (selectedIndex !== -1 && selectedIndex !== i) {divs[selectedIndex].innerHTML = createSvg1(colorList[selectedIndex].color, colorList[selectedIndex].name, colorList[selectedIndex].rgba);}selectedIndex = i;if (selectedIndex === i) {console.log(divs[selectedIndex].querySelector('p').innerText);element.innerHTML = createSvg2(colorList[i].bgc, colorList[i].name, colorList[i].rgba);} else {element.innerHTML = createSvg1(colorList[i].color, colorList[i].name, colorList[i].rgba);}})

然后，将 selectedIndex 设置为当前 div 元素的索引 i。
如果 selectedIndex 等于 i，那么执行以下操作：

a. 获取当前 div 元素中的 p 元素，并将其 innerText 打印到控制台。

b. 将当前 div 元素的 innerHTML 设置为 createSvg2(colorList[i].bgc, colorList[i].name, colorList[i].rgba)。

否则就显示 createSvg1。
这里的createSvg2就是填充的五角星 svg；createSvg1就是镂空的五角星 svg
createSvg2的方法如下：

const createSvg2 = (fillColor, name, rgba) => {return (svg2 = ` <svg  t="1718699963963" class="icon1" viewBox="0 0 1024 1024" version="1.1" p-id="2359" width="64" height="64" style="filter: drop-shadow(0 0 3px rgba(${rgba}));"><path d="M529.066667 162.133333l83.626666 169.386667a42.666667 42.666667 0 0 0 32.213334 23.466667L832 382.08a42.666667 42.666667 0 0 1 23.68 72.96l-135.253333 132.053333a42.666667 42.666667 0 0 0-12.373334 37.76L739.84 810.666667a42.666667 42.666667 0 0 1-62.08 45.013333L510.506667 768a42.666667 42.666667 0 0 0-39.68 0l-167.253334 87.893333A42.666667 42.666667 0 0 1 241.493333 810.666667l32-186.24a42.666667 42.666667 0 0 0-12.373333-37.76L125.866667 455.04A42.666667 42.666667 0 0 1 149.333333 382.08l186.88-27.093333a42.666667 42.666667 0 0 0 32.213334-23.466667L452.266667 162.133333a42.666667 42.666667 0 0 1 76.8 0z" p-id="2360" fill="${fillColor}"></path></svg><p style="color:${fillColor}">${name}</p>`);// }
};

效果：
请添加图片描述

完整代码：

<!--* @Description: tab栏切换(五角星样式)* @Autor: Southern Wind
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./css/style.css" /><script src="./js/jquery-3.6.0-min.js"></script><style>#star {display: flex;margin: 0 auto;width: 1400px;}#star div p {text-align: center;font-size: 36px;font-weight: bold;}#star div svg {width: 50px;}#star div {position: relative;padding-top: 25px;box-sizing: border-box;}path {width: 48px;height: 46px;}#star div::after {content: "";width: 2px;height: 70px;position: absolute;top: -30px;transform: translate(-50%, 0);left: 50%;}#star div:nth-child(6n + 1) {padding-top: 5px;}#star div:nth-child(6n + 1)::after {height: 50px;}#star div:nth-child(6n + 2) {padding-top: 15px;}#star div:nth-child(6n + 2)::after {height: 60px;}#star div:nth-child(6n + 3) {padding-top: 25px;}#star div:nth-child(6n + 3)::after {height: 70px;}#star div:nth-child(6n + 4) {padding-top: 35px;}#star div:nth-child(6n + 4)::after {height: 80px;}#star div:nth-child(6n + 5) {padding-top: 45px;}#star div:nth-child(6n + 5)::after {height: 90px;}</style><style id="diycss"></style></head><body><div id="star"></div><script>const colorList = [{ color: "#FECB16", bgc: "#FBDC19", name: "A", rgba: "253,202, 48,.5" },{color: "#F85711",bgc: "#F85711",name: "B",rgba: " 246, 85, 33,.5",},{ color: "#CD15FA", bgc: "#CD15FA", name: "C", rgba: "204, 27,247,.5" },{color: "#1DA5FC",bgc: "#1DA5FC",name: "D",rgba: " 35,165,251 ,.5",},{ color: "#4CC74E", bgc: "#4CC74E", name: "E", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "F", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "E", rgba: "253,202, 48,.5" },{color: "#F85711",bgc: "#F85711",name: "F",rgba: " 246, 85, 33,.5",},{ color: "#CD15FA", bgc: "#CD15FA", name: "G", rgba: "204, 27,247,.5" },{color: "#1DA5FC",bgc: "#1DA5FC",name: "H",rgba: " 35,165,251 ,.5",},{ color: "#4CC74E", bgc: "#4CC74E", name: "I", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "G", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "K", rgba: "253,202, 48,.5" },{color: "#F85711",bgc: "#F85711",name: "L",rgba: " 246, 85, 33,.5",},{ color: "#CD15FA", bgc: "#CD15FA", name: "M", rgba: "204, 27,247,.5" },{color: "#1DA5FC",bgc: "#1DA5FC",name: "N",rgba: " 35,165,251 ,.5",},{ color: "#4CC74E", bgc: "#4CC74E", name: "O", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "P", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "Q", rgba: "253,202, 48,.5" },{color: "#F85711",bgc: "#F85711",name: "R",rgba: " 246, 85, 33,.5",},{ color: "#CD15FA", bgc: "#CD15FA", name: "S", rgba: "204, 27,247,.5" },{color: "#1DA5FC",bgc: "#1DA5FC",name: "T",rgba: " 35,165,251 ,.5",},{ color: "#4CC74E", bgc: "#4CC74E", name: "V", rgba: " 83,197, 86,.5" },{ color: "#3DC2AD", bgc: "#3DC2AD", name: "W", rgba: " 64,200,179,.5" },{ color: "#FECB16", bgc: "#FBDC19", name: "X", rgba: "253,202, 48,.5" },{color: "#F85711",bgc: "#F85711",name: "Y",rgba: " 246, 85, 33,.5",},{ color: "#CD15FA", bgc: "#CD15FA", name: "Z", rgba: "204, 27,247,.5" },];const createSvg1 = (color, name, rgba) => {return (svg1 = `<svg  t="1718699912553" class="icon " viewBox="0 0 1024 1024" version="1.1" p-id="2197" width="64" height="64" style="filter: drop-shadow(0 0 3px rgba(${rgba}));"><path d="M512 181.12l83.626667 169.386667a85.333333 85.333333 0 0 0 64 46.72l187.093333 27.306666-135.466667 131.84a85.333333 85.333333 0 0 0-24.533333 75.733334l31.786667 186.24-167.253334-87.893334a85.333333 85.333333 0 0 0-79.36 0l-167.466666 87.893334 32-186.24a85.333333 85.333333 0 0 0-24.533334-75.733334L177.066667 424.32l186.88-27.093333a85.333333 85.333333 0 0 0 64-46.72L512 181.12m0-42.666667a42.666667 42.666667 0 0 0-38.4 23.68l-83.626667 169.386667a42.666667 42.666667 0 0 1-32.213333 23.466667L170.666667 382.08a42.666667 42.666667 0 0 0-23.466667 72.96l135.253333 132.053333a42.666667 42.666667 0 0 1 12.373334 37.76L262.826667 810.666667a42.666667 42.666667 0 0 0 42.666666 50.133333 43.733333 43.733333 0 0 0 20.053334-5.12L492.16 768a42.666667 42.666667 0 0 1 39.68 0l167.253333 87.893333a43.733333 43.733333 0 0 0 20.053334 5.12 42.666667 42.666667 0 0 0 42.666666-50.133333l-32-186.24a42.666667 42.666667 0 0 1 12.373334-37.76l135.253333-132.053333A42.666667 42.666667 0 0 0 853.333333 382.08l-186.88-27.093333a42.666667 42.666667 0 0 1-32.213333-23.466667L550.4 162.133333A42.666667 42.666667 0 0 0 512 138.453333z" p-id="2198" fill="${color}"></path></svg><p>${name}</p>`);};const createSvg2 = (fillColor, name, rgba) => {return (svg2 = ` <svg  t="1718699963963" class="icon1" viewBox="0 0 1024 1024" version="1.1" p-id="2359" width="64" height="64" style="filter: drop-shadow(0 0 3px rgba(${rgba}));"><path d="M529.066667 162.133333l83.626666 169.386667a42.666667 42.666667 0 0 0 32.213334 23.466667L832 382.08a42.666667 42.666667 0 0 1 23.68 72.96l-135.253333 132.053333a42.666667 42.666667 0 0 0-12.373334 37.76L739.84 810.666667a42.666667 42.666667 0 0 1-62.08 45.013333L510.506667 768a42.666667 42.666667 0 0 0-39.68 0l-167.253334 87.893333A42.666667 42.666667 0 0 1 241.493333 810.666667l32-186.24a42.666667 42.666667 0 0 0-12.373333-37.76L125.866667 455.04A42.666667 42.666667 0 0 1 149.333333 382.08l186.88-27.093333a42.666667 42.666667 0 0 0 32.213334-23.466667L452.266667 162.133333a42.666667 42.666667 0 0 1 76.8 0z" p-id="2360" fill="${fillColor}"></path></svg><p style="color:${fillColor}">${name}</p>`);};let stylelist = "";colorList.forEach((item, index) => {const star = document.getElementById("star");const div = document.createElement("div");div.classList.add("c" + index);div.innerHTML = createSvg1(item.color, item.name, item.rgba);star.appendChild(div);stylelist +=".c" + index + "::after{background-color:" + item.color + "}";});document.querySelector("#diycss").innerHTML = stylelist;let selectedIndex = -1;let divs = document.querySelectorAll("#star div");for (let i = 0; i < divs.length; i++) {const element = divs[i];element.addEventListener("click", function () {if (selectedIndex !== -1 && selectedIndex !== i) {divs[selectedIndex].innerHTML = createSvg1(colorList[selectedIndex].color,colorList[selectedIndex].name,colorList[selectedIndex].rgba);}selectedIndex = i;if (selectedIndex === i) {console.log(divs[selectedIndex].querySelector("p").innerText);element.innerHTML = createSvg2(colorList[i].bgc,colorList[i].name,colorList[i].rgba);} else {element.innerHTML = createSvg1(colorList[i].color,colorList[i].name,colorList[i].rgba);}});}</script></body>
</html>

附：完整代码中的 style.css 等于是bass.css基础样式表，可以根据自己想要的样式进行修改。

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

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

相关文章

Java面试八股之myBatis的优缺点

Java面试八股之myBatis的优缺点

myBatis的优缺点 优点&#xff1a; 灵活性高&#xff1a; MyBatis允许直接编写原生SQL语句&#xff0c;这意味着你可以针对特定的数据库特性进行优化&#xff0c;处理复杂的查询逻辑&#xff0c;从而更好地满足业务需求。 易于上手&#xff1a; 相比Hibernate等其他ORM工具&…
阅读更多...
深度学习算法面经（高频核心问题总结，持续更新）

深度学习算法面经（高频核心问题总结，持续更新）

学习的过程短期目标是丰富己身&#xff0c;长远来看有的人为了就业财富自由&#xff1b;有的则为了创造一些有意义的事物&#xff0c;更多的是为了前者。 此文章用于记录和总结深度学习相关算法岗的各种面试问题&#xff0c;搜集答案并加入博主一些浅显的理解,欢迎评论区纠正、…
阅读更多...
第6章 设备驱动程序（4）

第6章 设备驱动程序（4）

目录 6.5 块设备操作 6.5.5 请求结构 6.5.6 BIO 6.5.7 提交请求 6.5.8 I/O调度 6.5.9 ioctl实现 本专栏文章将有70篇左右&#xff0c;欢迎关注&#xff0c;查看后续文章。 6.5 块设备操作 6.5.5 请求结构 struct request { //放在请求队列上&#xff0…
阅读更多...
curl发送邮件需要哪些参数设置？如何配置？

curl发送邮件需要哪些参数设置？如何配置？

curl发送邮件有哪些认证方式&#xff1f;如何通过curl命令发信&#xff1f; curl是一个命令行工具&#xff0c;用于在网络上传输数据&#xff0c;包括发送电子邮件。要使用curl发送邮件&#xff0c;需要设置一些参数以确保邮件被正确发送到目标收件人。AokSend来介绍一些必需的…
阅读更多...
【Unity】Animator动画倒播，与StartRecording动画录制

【Unity】Animator动画倒播，与StartRecording动画录制

一、Animator动画倒播 正常我们修改速度&#xff0c;只需要修改Animator.speed即可&#xff0c;但如果设置为负值&#xff0c;Animator系统会自动将其改为0值。 1.创建动画速度参数 (1)设置动画 我们需要创建表示速度的动画参数Speed&#xff0c;将其付给需要倒播的动画片段…
阅读更多...
改进位删除谜题的求解方法

改进位删除谜题的求解方法

问题背景 给定长度为 n 的二进制向量&#xff0c;如何删除恰好 n/3 个位&#xff0c;使剩余二进制向量的不同数量最小化。该问题被称为“位删除谜题”。 以下是该问题的示例&#xff1a; 对于 n 3 的情况&#xff0c;最优解是 2&#xff0c;对应两个不同的向量 11 和 00。对…
阅读更多...
韩国裸机云站群服务器托管租用方案

韩国裸机云站群服务器托管租用方案

随着网络技术的飞速发展&#xff0c;站群服务器在网站运营中扮演着越来越重要的角色。韩国裸机云站群服务器&#xff0c;以其独特的优势&#xff0c;如地理位置优越、价格相对较低、技术实力雄厚等&#xff0c;吸引了众多企业的关注。本文将为您详细介绍韩国裸机云站群服务器的…
阅读更多...
如何快速翻译pdf英文论文(5分钟就可以翻译一篇几十页的英文论文)

如何快速翻译pdf英文论文(5分钟就可以翻译一篇几十页的英文论文)

一、问题&#xff1a;如何快速翻译pdf英文论文 二、解决方法&#xff1a; 可以通过下面三个在线翻译来进行翻译pdf文档 百度翻译有道翻译谷歌翻译 方法&#xff1a;以有道翻译为例&#xff0c;可以直接百度搜索有道在线翻译&#xff0c;然后点击文档翻译&#xff0c;将pdf文…
阅读更多...
Python抓取天气信息

Python抓取天气信息

Python的详细学习还是需要些时间的。如果有其他语言经验的&#xff0c;可以暂时跟着我来写一个简单的例子。 2024年最新python教程全套&#xff0c;学完即可进大厂&#xff01;&#xff08;附全套视频 下载&#xff09; (qq.com) 我们计划抓取的数据&#xff1a;杭州的天气信息…
阅读更多...
docker pull xxx拉取超时time out

docker pull xxx拉取超时time out

文章目录 前言总结 前言 换了镜像源&#xff0c;改配置的都不行&#xff0c;弄了一个下午&#xff0c;最后运行一下最高指令就可以了 sudo docker_OPTS"--dns 8.8.8.8"总结 作者&#xff1a;加辣椒了吗&#xff1f; 简介&#xff1a;憨批大学生一枚&#xff0c;喜欢…
阅读更多...
02-ES6新语法

02-ES6新语法

1. ES6 Proxy与Reflect 1.1 概述 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。 Proxy 可以对目标对象的读取、函数调用等操作进行拦截&#xff0c;然后进行操作处理。它不直接操作对象&#xff0c;而是像代理模式&#xff0c;通过对象的代理对象进行操作&#xff0c;…
阅读更多...
WEB3-众筹合约

WEB3-众筹合约

构建众筹合约的框架&#xff0c;包括定义 IERC20 接口&#xff0c;并通过构造函数初始化代币合约。 By:HackQuesthttps://www.hackquest.io/zh
阅读更多...
如何用Vue3和ApexCharts打造引人注目的3D径向条形图

如何用Vue3和ApexCharts打造引人注目的3D径向条形图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 ApexCharts 构建美观的 Vue.js 径向条形图 应用场景 径向条形图是一种用于可视化单一数据点及其与目标或理想值的关系的图表类型。它在显示进度、完成率或其他类似度量时非常有用。 基本功能 这段代码…
阅读更多...
同三维T80002JEHV H.265高清解码器

同三维T80002JEHV H.265高清解码器

同三维T80002JEHV H.265高清解码器 1路HDMI1路VGA解码输出&#xff0c;1/2/4画面分割或16路轮询显示 产品简介&#xff1a; 同三维T80002JEHV解码器使用Linux系统&#xff0c;支持VGA/HDMI二种接口同时输出&#xff0c;支持多流输入多流解码及多屏显示&#xff0c;具有完善的…
阅读更多...
Django REST framework数据展示技巧：分页、过滤与搜索的实用配置与实践

Django REST framework数据展示技巧：分页、过滤与搜索的实用配置与实践

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff1…
阅读更多...
【修复Win11错误 0x80010135: 路径太长】

【修复Win11错误 0x80010135: 路径太长】

1. 问题现象&#xff1a; 一个意外错误使你无法复制该文件。如果你继续收到此错误&#xff0c;可以使用错误代码来搜索有关此问题的帮助。 错误 0x80010135: 路径太长 或者这样 2. 分析问题 造成这个问题的主要原因包括&#xff1a; 文件路径长度超过 260 个字符&#xf…
阅读更多...
Qt利用Coin3D（OpenInventor）进行3d绘图

Qt利用Coin3D（OpenInventor）进行3d绘图

文章目录 1.安装1.1.下载coin3d1.2.下载quarter1.3.解压并合并 2.在Qt中使用3.画个网格4.加载wrl模型 1.安装 1.1.下载coin3d 首先&#xff0c;到官网下载[coin3d/coin] 我是Qt5.15.2vs2019的&#xff0c;因此我选择这个coin-4.0.2-msvc17-x64.zip 1.2.下载quarter 到官网…
阅读更多...
【信息资源组织与管理】【开卷考】如何准备 期末考试复习必备

【信息资源组织与管理】【开卷考】如何准备 期末考试复习必备

索引篇 先去xhs找了开卷考有什么准备技巧&#xff0c;来自Prozac ❗️首先&#xff0c;适用于考试范围为课本内容或者课堂内容&#xff0c;如果有那种拓展题&#xff0c;脱离课本的&#xff0c;那我就没办法了。 ✅一定要熟悉熟悉熟悉课本 1. 第一遍略看课本&#xff0c;可以不…
阅读更多...
万界星空科技QMS质量管理介绍

万界星空科技QMS质量管理介绍

产品的生产质量是企业发展之根本&#xff0c;对所有企业来说&#xff0c;建立完善质量控制体系&#xff0c;对企业生产经营以及发展竞争具有至关重要的影响&#xff0c;可以说是企业质量保证的防火墙。QMS质量管理系统对任何一家企业都具有重要意义&#xff0c;可帮助企业提高生…
阅读更多...
shell脚本监控docker容器和supervisor 运行情况

shell脚本监控docker容器和supervisor 运行情况

1.ASR服务 需求: 在ASR服务器中 docker 以下操作中 忽略容器名字叫 nls-cloud-mongodb 的容器 在ASR服务器中 docker ps 查看正在运行的容器 docker stats -a --no-stream 可以监控容器所占资源 确认是否有pid且不等于0 docker inspect -f “{{.RestartCount}}” 容器名称 可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023