En este ejemplo te voy a mostrar como crear un array de mensajes automatico que cambia su contenido secuencialmente, el script se ejecuta de
forma automatica, el tiempo que dure la pausa en que se mantiene el contenido sin cambiar lo definimos con un valor en milisegundos, el script
lo insertamos dentro del cuerpo del documento, este script será el encargado de ejecutar el código HTML.
El primer paso será crear un documento HTML, trabajaremos con una platilla HTML5
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Crear un array de mensajes automaticos</title>
</head>
<body>
...
</body>
</html>El segundo paso será crear el script, entre etiquetas script vamos a insertar el código que vamos a ejecutar, en primer lugar
definimos las variables
var tiempo=3000
var contenido=new Array(4)
contenido[0]="Contenido 1"
contenido[1]="Contenido 2"
contenido[2]="Contenido 3"
contenido[3]="Contenido 4"
var indice_contenido=0En la variable “tiempo” definimos el tiempo en milisegundos que durará la pausa de tiempo (el tiempo que permanece la imagen sin cambiar),
luego creamos un objeto Array en el que especificamos el numero de variables o posiciones que va a contener, insertamos en el array las variables, y entre corchetes
el número de posición y su contenido, recuerda que en Javascript se usa la base de indexación 0, por lo que la primera posición sera 0. En la
variable “indice_contenido”, asignamos un valor “0”, este será el indice, el primer elemento del Array al que vamos a acceder.
Ahora vamos a crear la función, el código es muy simple, creamos una función a la que vamos a llamar “cambiar_contenido()”, dentro insertamos
una estructura “if”, con una condición muy sencilla, “…si la variable indice_contenido es mayor que … el numero de variables contenidas
en el array…”, entonces, “indice_contenido” valdrá “0”, referenciamos por su identificador el elemento “contenedorjs” (que todavia no hemos creado) e insertamos contenido con “innerHTML”, le asignamos el valor contenido[indice_contenido], que será la primera variable(“0”) que hemos declarado en el Array.
Ahora le indicamos a la variable “indice_contenido” que recorra las posiciones del Array de uno en uno con el operador “++”, por último con “setTimeout” llamamos a la función “cambiar_contenido()” despues del número de milisegundos que hemos declarado en la variable “tiempo”, por lo que le pasamos
como valor esta variable, que sería lo mismo que 3000 milisegundos
function cambiar_contenido(){
if (indice_contenido>=contenido.length)
indice_contenido=0
document.getElementById("contenedorjs").innerHTML=contenido[indice_contenido]
indice_contenido++
setTimeout("cambiar_contenido()",tiempo)
}Creamos con “document.write” el elemento <div> con identificador “contenedorjs” y llamamos a la función “cambiar_contenido” con “window.onload” o desde la etiqueta <body>
con un evento “onload”
document.write('<div id="contenedorjs"></div>')
window.onload=cambiar_contenidoEl codigo completo
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>https://didesweb.com/</title>
<style>
.verde,.azul,.rojo,.amarillo {
text-align: center;
width: 200px;
box-shadow: 2px 2px 2px #CCCCCC;
-moz-box-shadow: 2px 2px 2px #CCCCCC;
-webkit-box-shadow: 2px 2px 2px #CCCCCC;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.verde {
border: 1px solid #006600;
background-color: #9EFF9E;
color: #006600;
}
.azul {
border: 1px solid #006600;
background-color: #66CCFF;
color: #006600;
}
.rojo {
border: 1px solid #FF0000;
background-color: #FFCCCC;
color: #FF0000;
}
.amarillo {
border: 1px solid #CCCC00;
background-color: #FFFFCC;
color: #CCCC00;
}
</style>
</head>
<body onload="cambiar_contenido()">
<script>
//variables
var tiempo=3000
var contenido=new Array(4)
contenido[0]="<div class='verde'><p>Color del texto #006600</p><p>Color del fondo #9EFF9E</p></div>"
contenido[1]="<div class='azul'><p>Color del texto #006600</p><p>Color del fondo #66CCFF</p></div>"
contenido[2]="<div class='rojo'><p>Color del texto #FF0000</p><p>Color del fondo #FFCCCC</p></div>"
contenido[3]="<div class='amarillo'><p>Color del texto #CCCC00</p><p>Color del fondo #FFFFCC</p></div>"
var indice_contenido=0
//funcion
function cambiar_contenido(){
if (indice_contenido>=contenido.length)
indice_contenido=0
document.getElementById("contenedorjs").innerHTML=contenido[indice_contenido]
indice_contenido++
setTimeout("cambiar_contenido()",tiempo)
}
document.write('<div id="contenedorjs"></div>')
</script>
</body>
</html>Puedes ver el código de este archivo en mi cuenta de GitHub.
Valoraciones
Sé el primero en valorar