TUTORIAL AT: SCRIPTS PARA PÁGINAS WEB

1.-Lanza un mensaje al ingresar en la página web (mensaje de alerta):

colocarlo preferentemente entre<head>y</head>

2.-Mostrar un mensaje cuando el usuario pinche con el ratón sobre un botón:

3.-Cuando el usuario pincha sobre el elemento <div> se muestra un
mensaje y cuando el usuario pasa el ratón por encima del elemento, se muestra otro
mensaje:

4.-Cuando el usuario pasa el ratón por encima del <div>, el color del borde se muestra de
color negro. Cuando el ratón sale del <div>, se vuelve a mostrar el borde con el color gris
claro original:

5.-Las listas desplegables (<select>) son los elementos en los que es más difícil obtener su
valor. Si se dispone de una lista desplegable como la siguiente:

6.-Coloca la fecha y el mes actuales:

____
____

7.-Coloca un reloj:

8.-Coloca un reloj en cuenta atrás o reversa:

9.- Coloca imágenes que cambian constantemente

<html> 
<head> 
</head>
<script>
 var cont = 0;
 var arr = [
  ["1","1.jpg"], /*van los nombres de las imágenes y su extensión en la segunda parte*/
  ["2","2.jpg"], /*recordar guardar en la misma ruta del documento html*/
  ["3","3.jpg"]  /*los primeros nímeros son de referencia*/
 ]
 function cambia() {
  var d = document.getElementById("imagencambia");
  cont = cont % arr.length;
  d.innerHTML = "<a href='"+arr[cont][0]+"'><img border=1 width=250 height=250 src='"+arr[cont][1]+"'></a>";
  cont++;
 }        /*en img border=tamaño de borde y la anchura y altura width y height*/
 function inicio() {
  cambia();
  setInterval(cambia, 1000);/*aquí el tiempo en milisegundos, en este caso va hacer 1 segundo*/
 }
 window.onload=inicio;
</script>
<div id="imagencambia">
</div>
OTRA MARENA CURIOSA DE HACERLO ES QUE CREES UNA IMAGEN GIF DE TODAS TUS IMÁGENES; EL PROBLEMA VENDRÍA CUANDO QUISIERAS
AGREGAR O QUITAR UNA DE ELLAS, PERO SERÍA MENOS COMPLEJO YA QUE SOLO USARÍAS IMG SRC=, PERO ESTE ES UN BUEN MÉTODO
</body> 
</html>

10.-Editar nuestra imagen de fondo (quitar mosaico y cambiar tamaño)

11.-Coloca una imagen fija en la página web(no se mueve por más que bajen o suban)

12.- Hacer un cuadro que se alargue para poder VER MÁS TEXTO

<html>
    <head>
        <title>Pruebas</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	
    <script>
    $(function(){
        alturamaxima = $('.descripcion').height() + 'px';
		
		/*! altura cambio */
        alturaMinima = '44px';
        
		$('.descripcion').height(alturaMinima);	
        $('.contenedor .titulo').toggle( function (){
            $(this).prev().animate({height: alturamaxima},1000);
        }, function (){
            $(this).prev().animate({height: alturaMinima},1000);
		
        });
    });
    </script>
    <style>
        body{font-size:12px; font-family:Arial}

/*! anchura */
        .contenedor{border:1px solid #ccc; background:#E2E2E2; width:150px;}
		
		
        .titulo{background:#CDCDCD; cursor:pointer }
        .contenedor, .titulo, .descripcion{padding:3px}
        .descripcion{background:#F0F0F0; overflow:hidden}
    </style>
    </head>
    <body>
     
        <div class="contenedor">
            
            <div class="descripcion">
AQUÍ VA EL CONTENIDO
AQUÍ VA EL CONTENIDO
AQUÍ VA EL CONTENIDO
AQUÍ VA EL CONTENIDO
AQUÍ VA EL CONTENIDO
AQUÍ VA EL CONTENIDO
AQUÍ VA EL CONTENIDO </div>
<div class="titulo">
AQUÍ VER MÁS </div>
</div>
</body>
    </html>

TUTORIAL AT

Páginas

Buscar

SCRIPTS PARA PÁGINAS WEB

No hay comentarios:

Publicar un comentario