如何实现Div主体与边框不同时间间隔的彩色闪烁效果

看起来你想要实现的是内容区域按时间间隔切换背景色（彩色闪烁），同时边框按另一个独立间隔闪烁，但你当前的代码是通过display: none来控制元素的显示/隐藏，这和你想要的“彩色闪烁”效果不符哦。我来帮你调整实现逻辑：

核心思路 #

• 内容闪烁：通过定时切换元素的backgroundColor属性，循环使用预设的彩色数组来实现“彩色闪烁”
• 边框闪烁：通过定时切换元素的边框样式（比如显示/隐藏边框，或者切换边框颜色），使用另一个独立的定时器控制间隔

完整实现代码 #

HTML结构 #

<div id="blink" class="blink-box">
  我是会彩色闪烁的内容区域
</div>

CSS基础样式 #

.blink-box {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 3px solid transparent; /* 初始透明边框，方便闪烁切换 */
}

JavaScript逻辑（jQuery版本） #

$(document).ready(function() {
  const promo = $('#blink')[0]; // 获取DOM元素
  // 预设内容闪烁的颜色数组
  const bgColors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'];
  let bgIndex = 0;
  
  // 内容彩色闪烁定时器（间隔1000ms）
  setInterval(function() {
    promo.style.backgroundColor = bgColors[bgIndex];
    bgIndex = (bgIndex + 1) % bgColors.length; // 循环切换颜色
  }, 1000);

  // 边框闪烁定时器（间隔500ms）
  let borderVisible = false;
  setInterval(function() {
    if (borderVisible) {
      promo.style.borderColor = 'transparent'; // 隐藏边框
    } else {
      promo.style.borderColor = '#ff3366'; // 显示红色边框
    }
    borderVisible = !borderVisible;
  }, 500);
});

代码解释 #

1. 内容彩色闪烁：我们定义了一组鲜艳的背景色数组，通过定时器每隔1秒切换一次元素的背景色，利用取余运算实现颜色的循环切换，达到“彩色闪烁”的效果。
2. 边框独立闪烁：使用另一个定时器（间隔500ms），通过切换边框的颜色（透明/红色）来实现边框的闪烁效果，和内容闪烁的定时器完全独立，互不干扰。
3. 如果你想要边框也切换彩色，只需要给边框也定义一个颜色数组，用同样的循环逻辑即可。

内容的提问来源于stack exchange，提问作者James