主页 / 问题 / 617394
Accepted
Masquitos
Asked:2020-01-21 01:10:47 +0000 UTC2020-01-21 01:10:47 +0000 UTC

纯javascript中的闪烁框架[关闭]

  • 772

请给我纯javascript中闪烁框架的代码。我找不到任何地方。

javascript

2 个回答

  1. Best Answer

    setInterval(function() {
  if (document.getElementById("myborder").className == "noact") {
    document.getElementById("myborder").className = "active";
  } else {
    document.getElementById("myborder").className = "noact" 
  }
}, 1000);
    #myborder {
  width: 400px;
  height: 50vh;
}

.active {
  border:5px solid red;
}

.noact {
  border:5px solid yellow;
}
    <div id="myborder" class="active"></div>

    • 4

  2. 选项 1 - Javascript

    setTimeout(function() {
  setInterval(function() {
    document.getElementsByClassName("b-border")[0].style.borderColor = "gray";
  }, 1000);
}, 500);

setInterval(function() {
  document.getElementsByClassName("b-border")[0].style.borderColor = "green";
}, 1000);
    .b-border {
  border: 5px solid gray;
  width: 150px;
  height: 150px;
}
    <div class="b-border"></div>

    选项 2 - CSS

    .b-border {
  border: 5px solid gray;
  width: 150px;
  height: 150px;
  animation: animBlinkBorder 1s linear infinite;
}
@keyframes animBlinkBorder {
  0% {
    border-color: gray;
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: gray;
  }
}
    <div class="b-border"></div>

    • 3

相关问题