Question

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

＆＃13;

$(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);


});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

另外，如果我理解正确，您就不需要所有HTML。你真的只需要页脚和容器元素。

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

＆＃13;

auto trait

＆＃13;

$(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);
});

＆＃13;

/* 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; }

＆＃13;

Answer 2

您的代码存在的问题是，一旦您隐藏了孩子，父母就没有内容，从而失去了背景，当您隐藏父母时，孩子也会消失。您可以通过可见性来实现这一点，但是当您隐藏父级时，它仍然会隐藏子级，但至少在渲染时不会消失保留的空间，因此不会在周围的文本/ html周围抽搐

我修改了你的代码，使用普通的javascript作为Scott Marcus强调的jQuery类交换的替代方法。

＆＃13;

from paramiko import SSHClient, AutoAddPolicy

ssh = SSHClient()
ssh.load_system_host_keys()
ssh.set_missing_host_key_policy(AutoAddPolicy())
ssh.connect('host',22,'login','pwd')

(InputStream, OutputStream, Error) = ssh.exec_command('bbjobs')
print(list(OutputStream))
print(list(Error))

＆＃13;

self.onload = function(){
    var promo = document.getElementById('blink');
    var extraBlink = document.getElementById('extraBlink');
    setInterval(function() {
        promo.style.backgroundColor  = promo.style.backgroundColor=="yellow"?"magenta":"yellow";
    }, 1000);
    setInterval(function() {
    	extraBlink.style.backgroundColor = extraBlink.style.backgroundColor=="red"?"blue":"red";
    }, 500);

};

＆＃13;

#blink{
  border-style: solid;
  padding:10px;
}
#extraBlink{
  border-style: solid;
  padding:10px;
}
.promotion {
  width:100%;
  height:60px;
  text-align:center;
}

＆＃13;

制作一个闪烁的div与不同的颜色

2 个答案: