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.... Commented 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. Commented el 16 dic. 2019 a las 7:57
  • Todo tuyo!!! cualquier mejora le viene bien al OP. Gracias. Commented 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). Commented 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. Commented el 17 dic. 2019 a las 12:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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