Tecnología

Inicio

Cómo crear un borde intermitente en DIV

Cómo crear un borde intermitente en DIV


Creación de un borde intermitente en un elemento <DIV> es una buena manera de llamar la atención de los visitantes de su sitio web. Con el fin de lograr esto, usted necesita utilizar "setInterval ()" función de JavaScript para crear un bucle a parpadear la frontera de la DIV. El número de colores utilizados en la animación intermitente es efectivamente ilimitada, lo que significa que puede crear un borde intermitente para adaptarse a cualquier sitio web o entorno.

Instrucciones

1 Abra el archivo .HTML o .PHP que contiene su página web. Debido a que los editores de texto enriquecido como Word pueden introducir errores de formato que reducen la compatibilidad, utilice un editor simple como el Bloc de notas o TextEdit para realizar cambios en el código HTML.

2 Desplázate hasta la sección de cabecera del documento HTML. Agregue el código siguiente inmediatamente después de la "<head>" etiqueta de apertura:

<Script type = "text / javascript">

<! -

var state = 0;

var tiempo de flash = 100;

Función Flash (div_id) {self.setInterval ( "changeBorder ( '" + div_id + "')", tiempo de flash); }

función changeBorder (div_id) {

si (== estado 0) {document.getElementById (div_id) .style.borderColor = "# ffffff '; Estado = 1; }

else {document.getElementById (div_id) .style.borderColor = "# 000000"; Estado = 0;}

}

->

</ Script>

3 Cambio "#ffffff" - sólido de color blanco - y "# 000000" - sólido negro - si es necesario, a los colores que se ajustan a su sitio web mejor. Usar la notación de color HTML estándar, con "#" seguido de dos números hexadecimales para el valor de color rojo, dos para el verde y dos para el azul.

4 Añadir un nuevo elemento <DIV> en la sección del cuerpo de su página web usando el siguiente código:

<Div onclick = "flash ( 'intermitente')" id = "intermitente" style = "border: 4PX sólida # 000000;"> comienzan a parpadear </ div>

Esto creará un nuevo DIV, con un espesor de borde alrededor de las palabras "comienzan a parpadear" que, cuando se hace clic, los flashes de la frontera DIV rápidamente.

Consejos y advertencias

  • El código puede ser utilizado con cualquier elemento <DIV>; sólo cambia la parte entre los paréntesis de la función de flash () para la identificación de la nueva DIV. Por ejemplo, si usted tenía un div llamado "contenedor", que iba a escribir "<div id =" contenedor "onclick =" flash ( "contenedor") ">" en su lugar.
  • Si desea cargar la frontera con más de dos colores, añadir "más si" declaraciones después de la instrucción "if ()" en la función changeBorder (), lo que aumenta el valor del "estado" variable cada vez; por ejemplo, "else if (estado == 1) {document.getElementById (div_id) .style.borderColor =" # 888888 ", el estado = 2;}" hará que la frontera DIV a flash gris ( "# 888888") antes parpadea negro.