Мигающая рамка на чистом javascript [требует правки]

465

22 января 2017, 16:56

дайте пожалуйста код мигающей рамки на чистоом javascript . нигде не могу найти.

Answer 1

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>

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