Holatodo el mundo,enEstoTutorialMequeríaParacrearunsimpledigitalrelojquemuestraelfechaytiempo,conelAyudadejQuerysecuencia de comandosyCSS3,tienefácilParacomprenderelvariosmétodosutilizado.
<>clase = "c1" > HTML
Elmarcadoesrealmentesimpleyflexibleyse adaptaParamuchosposibleescenariossepodríaencuentro.Crearundiv"reloj",crearotradivID"Fecha"seserácontienennuestradatos,Finalmentedefineunsin ordenarlistaqueserácontienenelhora,minutosysegundos.
< divclase = "reloj" >
< divID = "Fecha" >< / div >
< ul >
< liID = 'horas' >< /li >
< liID = "punto" >: < /li >
< liID = "min" >< /li >
< liID = "punto" >: < /li >
< liID = "sec" >< /li >
/UL >
/div >
Elpeinadoesmuysimple,sepuedecrearestilosequiere,Estoessólounplantillaparausted.
/*IfseQuierosepuedeusotipo de letra*/{font-family:'BebasNeueRegular';Fuente:URL('BebasNeue-webfont.eot');Fuente:URL('BebasNeue-webfont.EOT?#iefix')Format('embedded-opentype'),URL('BebasNeue-webfont.woff')Format('woff'),URL('BebasNeue-webfont.ttf')Format('truetype'),URL('BebasNeue-webfont.svg#BebasNeueRegular')Format('svg');font-weight:normal;estilo de fuente:normal;}
.Container{Ancho:960px;margen:0auto;desbordamiento:oculta;}
.Clock{Ancho:800px;margen:0auto;relleno:30px;frontera:1pxsólido#333;Color:#fff;}
#Date{font-family:'BebasNeueRegular',Arial,Helvetica,sans-serif;tamaño de la fuente:36px;texto-alinee:Centro;sombra:005px#00c6ff;}
UL{Ancho:800px;margen:0auto;relleno:0px;estilo de la lista:ninguno;texto-alinee:Centro;}
ULLi{pantalla:en línea;tamaño de la fuente:10em;texto-alinee:Centro;font-family:'BebasNeueRegular',Arial,Helvetica,sans-serif;sombra:005px#00c6ff;}
#point{posición:relativa;-moz-animación:mymove1Sfacilidadinfinito;-webkit-animation:mymove1Sfacilidadinfinito;padding-left:10px;padding-right:10px;}
/*SimpleAnimación*/mymove{0%{opacidad:1.0;sombra:0020px#00c6ff;}
50%{opacidad:0;sombra:ninguno;}
100%{opacidad:1.0;sombra:0020px#00c6ff;}}
mymove{0%{opacidad:1.0;sombra:0020px#00c6ff;}
50%{opacidad:0;sombra:ninguno;}
100%{opacidad:1.0;sombra:0020px#00c6ff;};}
<>clase = "c2" >jQueryElprimerapasoesParaLlame aleljQueryarchivo.
< scripttipo = "texto/javascript"src = "http://code.jquery.com/jquery-1.6.4.min.js" >
CrearunNuevosecuencia de comandosetiquetayinsertarelcódigo.
< scripttipo = "texto/javascript" >$(document).ready(function(){//Creardosvariableconelnombresdeelmesesydíasenunarreglo de discosvarmonthNames=["Enero","Febrero",«Marcha»,"Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];vardayNames =["Domingo", "Lunes" "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]
//CrearunnewDate()objetovarnewDate=NuevoDate ();//Extracto de laelactualfechaDeFechaobjetonewDate.setDate(newDate.getDate());//Salidaeldía,fecha,mesyaño$(' #Date').html(dayNames[newDate.getDay()]+""+newDate.getDate()+''+monthNames[newDate.getMonth()]+''+newDate.getFullYear());
setInterval)function(){//CrearunnewDate()objetoyExtracto de laelsegundosdeelactualtiempoenelde visitantevarsegundos=NuevoDate().getSeconds();//AñadirunprincipalesceroParasegundosvalor$("#sec").html ()segundos<10?"0":"")+segundos);}, 1000);setInterval)function(){//CrearunnewDate()objetoyExtracto de laelminutosdeelactualtiempoenelde visitantevarminutos=NuevoDate().GetMinutes();//AñadirunprincipalesceroParaelminutosvalor$("#min").html ()minutos<10?"0":"")+minutos);}, 1000);setInterval)function(){//CrearunnewDate()objetoyExtracto de laelhorasdeelactualtiempoenelde visitantevarhoras=NuevoDate().getHours();//AñadirunprincipalesceroParaelhorasvalor$("#hours").html ()horas<10?"0":"")+horas);},1000);});
<>clase = "c1" > elLógica
NuevoDate()
CreaunNuevoFechaobjetoconelvalordeelactualfechaytiempoenelExploradorSCM
setDate()ygetDate()
setDate()métodoestableceeldíadeelmes(a partir de1Para31),segúnParalocaltiempo,al mismo tiempoelgetDate()métodoDevuelveeldíadeelmes(a partir de1Para11kparaelespecificadofecha,segúnParalocaltiempo.getSeconds(),getMinutes()ygetHours()
EstosmétodospermitenParaExtracto de laelsegundos,minutosyhorasdeelactualtiempoenelExploradorSCM(segundos<10?"0":"")+segundos)
AñadirunprincipalesceroParaelsegundosvalor,elmismose aplicaparaelminutosyhoras.El?y:símbolosutilizapor encima decomprendenelternariooperador.EstoesunespecialoperadorqueDevuelveelvalorantes deelColónIfelcondiciónantes deelconsulta(?)esverdadero,oelvalordespués de laelColónIfelcondiciónesfalso.
setIntervalfunción
setIntervalesunestándarJavaScriptfunción,nopartedejQuery.SeLlame alseconunfunciónParaejecutaryunperíodo deenmilisegundos.
