原生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基础样式表，可以根据自己想要的样式进行修改。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【AI大模型】在健康睡眠监测中的深度融合与实践案例

【AI大模型】在健康睡眠监测中的深度融合与实践案例

文章目录 1. 应用方案2. 技术实现2.1 数据采集与预处理2.2 构建与训练模型2.3 个性化建议生成 3. 优化策略4. 应用示例&#xff1a;多模态数据融合与实时监测4.1 数据采集4.2 实时监测与反馈 5. 深入分析模型选择和优化5.1 LSTM模型的优势和优化策略5.2 CNN模型的优势和优化策略…
阅读更多...
DeepSpeed Pipeline并行

DeepSpeed Pipeline并行

DeepSpeed为了克服一般Pipeline并行的forward时weights,和backward时计算梯度的weights, 二者不相同的问题&#xff0c;退而求其次&#xff0c;牺牲性能&#xff0c;采用gradient-accumulate方式&#xff0c;backward时只累积梯度至local&#xff0c;并不更新weights&#xff1…
阅读更多...
手机录屏声音怎么录？2个小妙招教会你

手机录屏声音怎么录？2个小妙招教会你

手机录制好的视频怎么没有声音&#xff1f;你是否也遇到了这个难题&#xff1f;在日常生活中&#xff0c;手机录屏功能已经成为我们生活和工作中的得力助手。而录屏的声音&#xff0c;作为录屏功能的重要组成部分&#xff0c;更是为我们的录制体验增添了不少色彩。那么&#xf…
阅读更多...
如何提升外链网站的收录率？

如何提升外链网站的收录率？

要提高外链网站的收录率&#xff0c;要明确的一点是&#xff0c;被收录的外链才能发挥最大的作用&#xff0c;因此&#xff0c;提升收录率是首要任务。一个有效的方法是使用GPC爬虫池&#xff0c;这样可以大幅度提高谷歌蜘蛛对众多外链网站页面的抓取频率 通过GPC爬虫池的引导…
阅读更多...
基于CLIP 建模用于假图像检测探索与应用

基于CLIP 建模用于假图像检测探索与应用

概述 论文地址&#xff1a;https://arxiv.org/pdf/2402.12927 源码地址&#xff1a;https://github.com/sohailahmedkhan/CLIPping-the-Deception 本研究探讨了如何使用 CLIP 这一图像和语言的多模态底层模型来检测伪造图像。这项研究的一个重要创新点是&#xff0c;它建立了…
阅读更多...
Linux C编译器从零开发三

Linux C编译器从零开发三

AST语法树 BNF抽象 expr equality equality relational ("" relational | "!" relational)* relational add ("<" add | "<" add | ">" add | ">" add)* add mul ("" …
阅读更多...
2024年光电信息、光学工程与机器视觉国际学术会议(OIOEMV 2024)

2024年光电信息、光学工程与机器视觉国际学术会议(OIOEMV 2024)

2024年光电信息、光学工程与机器视觉国际学术会议(OIOEMV 2024) 2024 International Conference on Optoelectronic Information, Optical Engineering and Machine Vision 会议地点&#xff1a;厦门&#xff0c;中国 网址&#xff1a;www.oioemv.com 邮箱: oioemvsub-conf…
阅读更多...
如何在前端项目中用字体图标替换图片，方便减小打包体积和统一切换颜色

如何在前端项目中用字体图标替换图片，方便减小打包体积和统一切换颜色

1.进入阿里妈妈矢量图标图库 地址&#xff1a;阿里妈妈矢量图 2.搜索自己想要的图标 3.添加自己想要的图标 4.把刚才选的图标&#xff0c;添加到自己要下载的项目 5.把项目下载到本地 6.引入iconfont.css 在div上增加对应的类名就可以啦 下载的所有类名都在下面的demo_index…
阅读更多...
校园学生选课系统

校园学生选课系统

摘 要 如今&#xff0c;随着互联网技术的不断推进与发展&#xff0c;信息技术已经在各行各业得到了应用。当前&#xff0c;高等院校也应该紧跟时代步伐&#xff0c;紧紧地依靠技术的发展&#xff0c;在信息化技术的服务和应用的基础上&#xff0c;对高校教育环节中存在的问题进…
阅读更多...
跟张良均老师学大数据人工智能|企业项目试岗实训开营

跟张良均老师学大数据人工智能|企业项目试岗实训开营

我国高校毕业生数量连年快速增长&#xff0c;从2021年的909万人到2022年的1076万人&#xff0c;再到2023年的1158万人&#xff0c;预计到2024年将达到1187万人&#xff0c;2024年高校毕业生数量再创新高。 当年高校毕业生人数不等于进入劳动力市场的高校毕业生人数&#x…
阅读更多...
TSINGSEE青犀云边端技术如何助力视频监控实现高效管理与安全监控

TSINGSEE青犀云边端技术如何助力视频监控实现高效管理与安全监控

随着信息技术的飞速发展&#xff0c;视频监控作为维护公共安全的重要手段&#xff0c;正逐渐融入人们的日常生活。在这个大数据、云计算、物联网等技术深度融合的时代&#xff0c;云边端技术作为一种新兴的技术架构&#xff0c;为视频监控带来了前所未有的变革与机遇。本文将以…
阅读更多...
OSPF和RIP的路由引入（华为）

OSPF和RIP的路由引入（华为）

#交换设备 OSPF和RIP的路由引入 不同的网络会根据自身的实际情况来选用路由协议。比如有些网络规模很小&#xff0c;为了管理简单&#xff0c;部署了 RIP; 而有些网络很复杂&#xff0c;可以部署 OSPF。不同路由协议之间不能直接共享各自的路由信息&#xff0c;需要依靠配置路…
阅读更多...
SSM小区车辆信息管理系统-计算机毕业设计源码06111

SSM小区车辆信息管理系统-计算机毕业设计源码06111

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…
阅读更多...
【广度优先搜索 深度优先搜索 图论】854. 相似度为 K 的字符串

【广度优先搜索 深度优先搜索 图论】854. 相似度为 K 的字符串

本文涉及知识点 广度优先搜索 深度优先搜索 图论 图论知识汇总 LeetCode 854. 相似度为 K 的字符串 对于某些非负整数 k &#xff0c;如果交换 s1 中两个字母的位置恰好 k 次&#xff0c;能够使结果字符串等于 s2 &#xff0c;则认为字符串 s1 和 s2 的 相似度为 k 。 给你…
阅读更多...
自学网络安全 or Web安全，一般人我还是劝你算了吧

自学网络安全 or Web安全，一般人我还是劝你算了吧

由于我之前写了不少网络安全技术相关的文章&#xff0c;不少读者朋友知道我是从事网络安全相关的工作&#xff0c;于是经常有人私信问我&#xff1a; 我刚入门网络安全&#xff0c;该怎么学&#xff1f; 要学哪些东西&#xff1f; 有哪些方向&#xff1f; 怎么选&#xff1f;…
阅读更多...
报表工具数据源的取数处理方式大对比

报表工具数据源的取数处理方式大对比

根据报表的需求&#xff0c;很多报表中的指标数据需要进行预处理&#xff0c;以满足快速抽取和展示的需要。对于帆软报表类似的产品&#xff0c;一般通过建立视图、合并数据表&#xff0c;形成直接应用于模板设计的数据集&#xff0c;报表直接和数据集进行交互、关联。当用户发…
阅读更多...
解锁TikTok数据潜力——高效获取TikTok视频评论回复数据接口

解锁TikTok数据潜力——高效获取TikTok视频评论回复数据接口

一、引言 在社交媒体蓬勃发展的今天&#xff0c;TikTok已成为全球范围内备受欢迎的短视频平台。为了帮助企业、个人和开发者更好地利用TikTok数据&#xff0c;我们推出了一款全新的接口服务&#xff0c;专注于高效获取TikTok视频评论回复数据。 二、核心功能介绍 高效获取评论…
阅读更多...
swagger下载文件名中文乱码、swagger导出文件名乱码、swagger文件导出名称乱码、解决swagger中文下载乱码bug

swagger下载文件名中文乱码、swagger导出文件名乱码、swagger文件导出名称乱码、解决swagger中文下载乱码bug

文章目录 一、场景描述&#xff1a;swagger导出文件名称乱码二、乱码原因三、解决方法3.1、方法一、在浏览器中输入地址下载3.2、方法二、swagger升级为2.10.0及以上 四、可能遇到的问题4.1、DocumentationPluginsManager.java:152 一、场景描述&#xff1a;swagger导出文件名称…
阅读更多...
如何做好媒体邀约宣发

如何做好媒体邀约宣发

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 如何做好媒体邀约&#xff1a;7个步骤&#xff0c;3个注意点&#xff0c;1个提醒。 一&#xff0c;媒体邀约七步走 明确活动的目的&#xff1a;首先&#xff0c;明确媒体邀约宣发的目标…
阅读更多...
小白跟做江科大32单片机之定时器输出比较

小白跟做江科大32单片机之定时器输出比较

原理部分 背景 GPIO口是数字输出端口&#xff0c;只能输出1和0。但是通过PWM&#xff0c;可以使其控制LED呼吸灯亮灭的程度 1.通过CNT和CCR进行比较&#xff0c;可以输出一定频率和占空比的PWM波形 2.通用定时器有4个CCR&#xff0c;可同时输出4路PWM波形&#xff0c;但只有…
阅读更多...
最新文章

Copyright @ 2022~2023