与间隔有关的表现

Question

我做了一个间歇性的酒吧，问题是我害怕，那些微不足道的东西需要这么多，我的意思是在1分钟以上 120 intervals制作，是否有更有效的方法？

window.addEventListener("DOMContentLoaded", () => {
var e = document.getElementById("bar"), flag = true;
setInterval(()=>{
if(flag) {
e.style.display = "none";
flag = !flag;
}
else {
e.style.display = "block";
flag = !flag;
}
},400);
});

#barText {
font-family: monospace; color: purple; font-size: 25px;
font-weight: 600;
position: absolute;
}
#bar {
width: 2.2px;
height: 29px;
background-color: purple;
margin: 0 0 0 22%;
}

<div>
<i id="barText">Overflow</i><div id="bar"></div>
</div>

Answer 1

你可以使用CSS动画而不是使用JS。

＆＃13;

＆＃13;

#barText {
    font-family: monospace; color: purple; font-size: 25px;
    font-weight: 600;
    position: absolute;
}
#bar {
    width: 2.2px;
    height: 29px;
    background-color: purple;
    margin: 0 0 0 22%;
    animation: blink-animation .6s steps(2, start) infinite;
    -webkit-animation: blink-animation .6s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

＆＃13;

<div>
<i id="barText">Overflow</i><div id="bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;