javascript - 用不同的颜色制作一个闪烁的div

Question

我正在尝试制作一个 div，它在一个时间间隔闪烁某种颜色，它有一个在不同时间间隔闪烁的边框。

$(document).ready(function() {
  var promo = document.getElementById('blink');
  var extraBlink = document.getElementById('extraBlink');
  setInterval(function() {
    promo.style.display = (promo.style.display == 'none' ? '' : 'none');
  }, 1000);
  setInterval(function() {
    extraBlink.style.display = (extraBlink.style.display == 'none' ? '' : 'none');
  }, 500);


});

#border {
  border-style: solid;
  border-color: rgb(61, 243, 61);
  border-width: 10px;
}

#promotion {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: rgb(170, 7, 7);
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blink">
  <div id="extraBlink">
    <div id="border">
      <footer id="promotion"> Half Price Today! </footer>
    </div>
  </div>
</div>

我只能让它闪烁一种颜色，而不是同时闪烁两种颜色。

Answer 1

由于您使用的是 JQuery，因此您应该使用它来获取对相关元素的引用以及切换样式(而不是设置内联样式，而是设置可以简单切换的类)。

此外，如果我的理解正确的话，您不需要所有的 HTML。您实际上只需要页脚和容器元素。

最后，您的 CSS 需要更多地分布在元素之间以创建正确的效果。

$(document).ready(function() {

  // Your already using JQuery so also use it to get the DOM references
  var $promo = $('#promotion');    
  var $border = $('#border');
  
  setInterval(function() {
    $promo.toggleClass("hidden");  // Toggles the show/hide aspect every 1.5 seconds
  }, 1000); 
  
  setInterval(function() {
    $border.toggleClass("border");  // Toggles the border every .5 seconds  
  }, 1000);
});

/* The container gets positioned and the child content will go for the ride. */
body {
 margin:0;
}
#border {
  box-sizing:border-box;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px; 
  text-align:center;
}

#promotion {
  box-sizing:border-box;
  background:rgb(170, 7, 7);
  width:calc(100% - 20px);
  height:60px;
  margin:10px;
}

.border {
  border:10px solid rgb(61, 243, 61);
}

.hidden { visibility:hidden; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="border">
  <footer id="promotion"> Half Price Today! </footer>
</div>