7

Necesito hacer un aviso de forma parpadeante o intermitente. El código que tengo consiste en hacer clic en un botón para luego ver un aviso que nos dice:

¡Tenga Precaución!.

Estoy intentando con el siguiente código:

caution = function(){
	/*con esto solo hago aparecer un párrafo que estaba escondido*/
		displayP.style.display="block";
	/*aquí es donde no se que hacer necesito saber una propiedad que me permita 
	hacer que el aviso "tenga precaución" salga de forma intermitente*/
};
/*creo una variable que sea la equivalente al párrafo id "p-btn"*/
var boton = document.getElementById("p-btn");
/*agrego un evento al parrafo que tiene la propiedad de boton*/
boton.addEventListener("click", caution);
 /*creo una variable que sea la equivalente al párrafo id "precaución"*/
var displayP = document.getElementById("precaucion");
#p-btn{background:rgba(204,0,51,0.4);padding: 5px;width: 70px;box-shadow: -2px 2px 3px #ac0033;color: white;}
#p-btn:active{box-shadow: -1px 1px 1px #890033;color: rgba(255,255,255,0.5);}
#precaucion{text-transform: capitalize; color: red; display: none;}
<div>
	<p id="p-btn">click aquí</p>
	<p id="precaucion">¡Tenga precaucion!</p>
</div>

1 respuesta 1

8

No es necesario utilizar Javascript para esto, intenta con el siguiente código:

document.getElementById("p-btn").addEventListener("click", (e) => {
  document.getElementById("precaucion").style.display = "block";
});
#p-btn {
  background: rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active {
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
}

#precaucion {
  text-transform: capitalize;  
  background: red;
  animation: alerta 1.5s linear 100ms infinite;
  opacity: 0;
  display: none;
}

@-webkit-keyframes alerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes alerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
}
<p id="p-btn">Pulse aquí</p>
<p id="precaucion">¡Tenga precaución!</p>

Básicamente eché mano de las transiciones CSS.

6
  • Decía que no era necesario js, me refería específicamente a la "animación" del Div. Existen diferentes formas de hacerlo... este es solo un ejemplo.... el 15 dic. 2019 a las 23:07
  • 1
    ¿Me permites una mejora en la animación? En vez de usar dos puntos, from y to, insertar un tercero intermedio (en 50%) para que la animación sea más suave. el 16 dic. 2019 a las 7:57
  • Todo tuyo!!! cualquier mejora le viene bien al OP. Gracias. el 16 dic. 2019 a las 12:40
  • 2
    Hecho. He eliminado el <div> adicional que agregaste (no es necesario), cambiado el nombre de la animación por alerta para que el OP entienda su uso (y no lo confunda con un atributo CSS normal) y modificada la animación para que permanezca más tiempo visible el texto y, además, he corregido el orden correcto de la versión corta (es name, duration, timing-function, delay, iteration-count, etc). el 16 dic. 2019 a las 12:56
  • 1
    Gracias me sirvió mucho. Aunque en mi plataforma de netbeans me arroja un error pero aún así se ejecuta el código. el 17 dic. 2019 a las 12:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.