Javascript代码片段

判断定时器是否正在运行

var isIntervalRunning = false; // 标志变量，默认为false

function startInterval() {
  if (!isIntervalRunning) {
    isIntervalRunning = true; // 将标志变量设置为true
    setInterval(function() {
      // 在这里写你要执行的代码
      // 每次回调函数执行完毕后将标志变量设置为false
      isIntervalRunning = false;
    }, 1000); // 设置每隔1秒执行一次回调函数
  }
}

gif自动轮播

let gifTimeId；
 function loopGif(ins) {
    gifTimeId = setInterval(() => {
      ins.src = ins.src;
    }, 8000);
  }

css文本文字两端对齐

.container{
    width: 4.3em;
    text-align: justify;
    text-align-last: justify;
    &::after {
      content: "";
      display: inline-block;
      width: 100%;
    }
}

获取鼠标在某一区域的坐标

  $("#mapGif").on("mousemove", function (event) {
    const rect = $(this)[0].getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
  });

数组分组

    pageData() {
      let todayRepast = this.repastInfo[this.date2Type.ymd] || [];
      if (todayRepast.length) {
        let tabData = todayRepast[this.active] || []; //早中晚
        if (tabData.length) {
          return tabData
            .map((element) => {
              if (element.length) {
                let groups = {};
                element.forEach((e) => {
                  if (!groups[e.belong]) {
                    groups[e.belong] = [];
                  }
                  groups[e.belong].push(e);
                });
                return groups;
              }
              return null;
            })
            .filter((e2) => e2 !== null);
        }
      }
      return [];
    },

canvas绘制GIF

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const gifImage = new Image();
gifImage.src = "path/to/animated.gif";

gifImage.onload = function() {
  const frameWidth = gifImage.width;
  const frameHeight = gifImage.height;

  // 将 Canvas 尺寸设置为 GIF 图像帧的尺寸
  canvas.width = frameWidth;
  canvas.height = frameHeight;

  let frameIndex = 0;
  let gifFrames = [];

  // 切分 GIF 图像为多个帧
  function splitFrames() {
    const tempCanvas = document.createElement("canvas");
    const tempCtx = tempCanvas.getContext("2d");
    tempCanvas.width = frameWidth;
    tempCanvas.height = frameHeight;
    tempCtx.drawImage(gifImage, 0, 0);

    const imageData = tempCtx.getImageData(0, 0, frameWidth, frameHeight);
    const pixels = imageData.data;

    // 获取图像的帧数
    for (let i = 0; i < pixels.length; i += frameWidth * frameHeight * 4) {
      const frameData = new Uint8ClampedArray(frameWidth * frameHeight * 4);
      frameData.set(pixels.subarray(i, i + frameWidth * frameHeight * 4));
      gifFrames.push(frameData);
    }
  }

  // 绘制 GIF 图像的帧
  function drawFrame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const frameData = gifFrames[frameIndex];
    const imageData = new ImageData(frameData, frameWidth, frameHeight);
    ctx.putImageData(imageData, 0, 0);

    frameIndex++;

    if (frameIndex >= gifFrames.length) {
      frameIndex = 0;
    }

    requestAnimationFrame(drawFrame);
  }

  // 加载并绘制 GIF 图像
  gifImage.onload = function() {
    splitFrames();
    drawFrame();
  };
};