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

news2024/11/17 16:24:17

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.coloradmin.cn/o/1839000.html

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

相关文章

【索引】数据库索引之顺序索引概述

【索引】数据库索引之顺序索引概述

目录 1、索引的基本概念 2、顺序索引 3、稠密索引和稀疏索引 3.1 什么是稠密索引&#xff1f; 3.2 什么是稀疏索引&#xff1f; 4、索引的更新 4.1 索引的插入操作 4.1 索引的删除操作 5、辅助索引 1、索引的基本概念 数据库中的索引与图书馆中书的索引作用相同&#xf…
阅读更多...
解锁TikTok内容趋势——高效获取TikTok标签信息接口

解锁TikTok内容趋势——高效获取TikTok标签信息接口

一、引言 在TikTok这个全球热门的短视频平台上&#xff0c;标签&#xff08;Hashtags&#xff09;是用户和内容创作者连接、发现新内容的重要工具。为了帮助品牌、市场分析师、内容创作者等更好地理解和利用TikTok上的内容趋势&#xff0c;我们推出了一款全新的接口服务&#…
阅读更多...
OPenCV实现把人形轮廓画在实时视频画面中

OPenCV实现把人形轮廓画在实时视频画面中

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 1.功能描述 当你从摄像头读取实时视频时&#xff0c;如果想在视频的画面中画一个方框&#xff0c;或者是画一个圆&#xff0c;是很简单的事情&#xff0c;可是…
阅读更多...
硬盘格式化NTFS好还是exFAT好 U盘存储文件用哪个格式好? 硬盘用exfat还是ntfs mac不能读取移动硬盘怎么解决

硬盘格式化NTFS好还是exFAT好 U盘存储文件用哪个格式好? 硬盘用exfat还是ntfs mac不能读取移动硬盘怎么解决

在计算机世界中&#xff0c;文件系统是数据管理的基石&#xff0c;而NTFS和exFAT无疑是这块基石上的两大巨头。它们各自拥有独特的特点和优势&#xff0c;并在不同的使用场景中发挥着重要作用。 什么是文件系统 文件系统提供了组织驱动器的方法。它规定了如何在驱动器上存储数…
阅读更多...
Boost 网络库

Boost 网络库

asio 网络编程的基本流程创建 socket绑定acceptor连接指定的端点服务器接受连接 网络编程的基本流程 服务端 1&#xff09;socket----创建socket对象。 2&#xff09;bind----绑定本机ipport。 3&#xff09;listen----监听来电&#xff0c;若在监听到来电&#xff0c;则建…
阅读更多...
如何做好媒体邀约宣发

如何做好媒体邀约宣发

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 如何做好媒体邀约&#xff1a;7个步骤&#xff0c;3个注意点&#xff0c;1个提醒。 一&#xff0c;媒体邀约七步走 明确活动的目的&#xff1a;首先&#xff0c;明确媒体邀约宣发的目标…
阅读更多...
深度 | OpenAI COO闭门访谈：大模型已至，企业如何落地？

深度 | OpenAI COO闭门访谈：大模型已至，企业如何落地？

图片来源&#xff1a;OpenAI Z Highlights&#xff1a; 仅仅允许公司单一部门使用互联网非常可笑。类似地&#xff0c;给所有员工开放AI权限将会是最大的催化剂。当前阶段的AI企业级部署&#xff0c;要让员工熟悉AI工具的使用方式&#xff0c;让他们将工作流程与模型的功能紧密…
阅读更多...
每天写java到期末考试（6.19）--1.百元买百鸡

每天写java到期末考试（6.19）--1.百元买百鸡

好久没有写了&#xff0c;现在赶快先复习复习&#xff0c;哈哈&#xff0c;加油&#xff01; 收获&#xff1a;写了好久&#xff0c;才写好这一个问题&#xff0c;提示自己不要好高骛远&#xff0c;前期先踏踏实实写好每一个代码&#xff1b; 被困住原因 取余%与整除/区别 pa…
阅读更多...
GaussDB技术解读——GaussDB架构介绍（五）

GaussDB技术解读——GaussDB架构介绍（五）

GaussDB架构介绍&#xff08;四&#xff09;从云原生关键技术架构&关键技术方案两方面对GaussDB云原生架构进行了解读&#xff0c;本篇将从关键技术方案的事务存储组件、SQL引擎组件、DCS组件、实时分析组件等方面继续介绍GaussDB云原生架构。 目录 事务存储组件 1、本地…
阅读更多...
openh264 Pskip 模式决策原理：WelsMdPSkipEnc 函数

openh264 Pskip 模式决策原理：WelsMdPSkipEnc 函数

WelsMdPSkipEnc函数介绍 函数功能&#xff1a;它尝试对当前宏块&#xff08;MB&#xff09;进行P-skip模式的编码&#xff0c;并返回一个布尔值表示是否成功。函数参数&#xff1a; 函数接受编码上下文 pEncCtxMD结构体 pWelsMd当前宏块 pCurMb宏块缓存 pMbCache 函数调用关系…
阅读更多...
人生的乐趣，在于对真知的追求

人生的乐趣，在于对真知的追求

子曰&#xff1a;朝闻道&#xff0c;夕死可矣&#xff01; 孔子说&#xff1a;早上听到关于世界的真理&#xff0c;哪怕晚上就die了都可以。 这句话很有力量而经常被人引用&#xff0c;表达出我们如何看待沉重的肉身和精神世界。 我们的生活目的&#xff1a;道。 —— 要了解…
阅读更多...
五种HTTP数据传输方式

五种HTTP数据传输方式

在前端开发过程中,后端主要提供 http 接口来传输数据,而这种数据传输方式主要有五种: url paramqueryform-urlencodedform-datajson 下面就让我们一起来了解一下在Nest.js中如何使用这五种HTTP数据传输方式: 一,创建项目 使用nest new 创建一个nest的项目 nest new 项目名称 …
阅读更多...
【送模板】5张图，帮你轻松搞懂OKR工作法

【送模板】5张图，帮你轻松搞懂OKR工作法

OKR是目标与关键结果法的缩写&#xff0c;OKR运用在工作中就是强调对业务进行逻辑思考&#xff0c;找到目标与关键结果之间的因果关系。这种因果关系的是否准确决定我们努力的价值。 OKR是一种高效的目标管理方法。“O”就是object&#xff0c;目标的意思&#xff0c;“kr”就…
阅读更多...
项目的打包

项目的打包

一:打包到微信小程序 1)vscode打包 2)在微信小程序开发工具中打开路径,上传. 疑问:为什么pnpm bulid:mp-weixin用于打包,pnpm dev:mp-weixin也可生成对应路径下的文件?? 打包的是没有热重载,且打包体积更小. 二:条件编译 vscode可以打包成能在不同平台上运行的代码.但是有…
阅读更多...
08--LVS网站高并发解决方案

08--LVS网站高并发解决方案

前言&#xff1a;LVS&#xff0c;工作稳定&#xff0c;抗负载能力强&#xff0c;属于运维基础&#xff0c;这里将lvs两种模式的部署方式在这里记录一下&#xff0c;并在示例完成后&#xff0c;补充一下基础概念。本章不可避免的涉及到一些网络方面知识&#xff0c;会形象简单的…
阅读更多...
被拷打已老实！面试官问我 #{} 和 ${} 的区别是什么？

被拷打已老实！面试官问我 #{} 和 ${} 的区别是什么？

引言&#xff1a;在使用 MyBatis 进行数据库操作时&#xff0c;#{} 和 ${} 的区别是面试中常见的问题&#xff0c;对理解如何在 MyBatis 中安全有效地处理 SQL 语句至关重要。正确使用这两种占位符不仅影响应用的安全性&#xff0c;还涉及到性能优化。 题目 被拷打已老实&…
阅读更多...
富唯智能打造的AGV搬运机器人转运机器人

富唯智能打造的AGV搬运机器人转运机器人

AGV搬运机器人&转运机器人 AGV搬运机器人&#xff0c;内部搭载ICD系列核心控制器&#xff0c;拥有不同的移载平台&#xff0c;负载最高可达 1000kq;重复精度高达5mm;支持 Wi-Fi漫游&#xff0c;实现更稳健的网络数据交互;无轨化激光 SLAM 导航&#xff0c;配合 3D 避障相机…
阅读更多...
2024年仿真建模与多媒体技术国际学术会议（ISMMT 2024）

2024年仿真建模与多媒体技术国际学术会议（ISMMT 2024）

全称&#xff1a;2024年仿真建模与多媒体技术国际学术会议&#xff08;ISMMT 2024&#xff09; 会议网址:http://www.ismmt.com 会议时间&#xff1a;最终通知见官网&#xff01; 会议地点: 深圳 投稿邮箱&#xff1a;ismmtsub-conf.com投稿标题&#xff1a;ArticleTEL。投稿时…
阅读更多...
什么是“基准测试集”呢？

什么是“基准测试集”呢？

基准测试集有三部分构成&#xff1a;DocumentSet、QuerySet、RelevantJudgement。在比较多个IR系统孰优孰劣的时候&#xff0c;要做的就是&#xff1a;使用统一的DecumentSet建立索引&#xff0c;然后使用统一的QuerySet去进行查询&#xff0c;最后使用统一的judgement进行评判…
阅读更多...
web爬虫笔记：js逆向案例九（某多多 anti_content参数）补环境流程

web爬虫笔记：js逆向案例九（某多多 anti_content参数）补环境流程

web爬虫笔记：js逆向案例九（某多多 anti_content参数）补环境流程 一、目标网站：aHR0cHM6Ly9tb2JpbGUueWFuZ2tlZHVvLmNvbS8= 二、接口分析 1、快速定位加密位置（通过搜索/cells/hub/v3快速定位到加密js文件） 2、通过分析可知&#
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023