Para usar estas funciones, es tan sencillo como crear una variable con new Date()<\/strong> para definir la fecha y hora actual y luego pintar en pantalla los datos que deseemos. En el ejemplo siguiente, pintamos el d\u00eda del mes en el que estamos.<\/p>\n

<script type=\u00bbtext\/javascript\u00bb><\/em><\/strong><\/p>\n

var d = new Date();<\/em><\/strong><\/p>\n

document.write(d.getDate());<\/em><\/strong><\/p>\n

<\/script><\/em><\/strong><\/p>\n

Si queremos que nos diga la hora, podemos escribir el siguiente c\u00f3digo:<\/p>\n

<script type=\u00bbtext\/javascript\u00bb><\/em><\/strong><\/p>\n

var d = new Date();<\/em><\/strong><\/p>\n

document.write(d.getHours());<\/em><\/strong><\/p>\n

<\/script><\/em><\/strong><\/p>\n

Para conseguir que nos de toda la informaci\u00f3n sobre le fecha y hora, podemos encadenar las funciones de fecha y hora, mediante el siguiente c\u00f3digo:<\/p>\n

<script type=\u00bbtext\/javascript\u00bb><\/em><\/strong><\/p>\n

var d = new Date();<\/em><\/strong><\/p>\n

document.write(‘Fecha: ‘+d.getDate(),'<br>Dia de la semana: ‘+d.getDay(),'<br>Mes (0 al 11): ‘+d.getMonth(),'<br>A\u00f1o:’+d.getFullYear(),'<br>Hora:’+d.getHours(),'<br>HoraUTC: ‘+d.getUTCHours(),'<br>Minutos: ‘+d.getMinutes(),'<br>Segundos: ‘+d.getSeconds());<\/em><\/strong><\/p>\n

<\/script><\/em><\/strong><\/p>\n

Obteniendo un resultado en pantalla como el siguiente:<\/p>\n

Fecha: 18<\/strong><\/p>\n

D\u00eda de la semana: 5<\/strong><\/p>\n

Mes (0 al 11): 7<\/strong><\/p>\n

A\u00f1o: 2017<\/strong><\/p>\n

Hora: 9<\/strong><\/p>\n

Hora UTC: 7<\/strong><\/p>\n

Minutos: 15<\/strong><\/p>\n

Segundos: 51<\/strong><\/p>\n

Pero esto hay que adaptarlo a nuestro formato de fecha, de forma que sea el usado habitualmente en nuestro pa\u00eds. Por ejemplo el siguiente c\u00f3digo, nos muestra la fecha en formato d\u00eda\/mes\/a\u00f1o. <\/strong>Ejemplo 22\/08\/2017.<\/p>\n

<div style=\u00bbfloat:left;\u00bb><\/em><\/strong><\/p>\n

<script type=\u00bbtext\/javascript\u00bb><\/em><\/strong><\/p>\n

var\u00a0 today = new Date();<\/em><\/strong><\/p>\n

var m = today.getMonth() + 1;<\/em><\/strong><\/p>\n

var mes = (m < 10) ? ‘0’ + m : m;<\/em><\/strong><\/p>\n

document.write(‘Fecha: ‘+today.getDate(),’\/’ +mes,’\/’+today.getFullYear());<\/em><\/strong><\/p>\n

<\/script><\/div><\/em><\/strong><\/p>\n

En muchas publicaciones encontraras ejemplos de c\u00f3digos para pintar de forma correcta la fecha y hora en tus webs. Aconsejamos al lector que busque y pruebe los ejemplos de c\u00f3digo propuestos.<\/p>\n

En el siguiente ejemplo tienes el c\u00f3digo b\u00e1sico para poner en tu web un reloj digital. A este c\u00f3digo le puedes aplicar tantos formatos que como desees para personalizarlo.<\/p>\n

\u00a0<script type=\u00bbtext\/javascript\u00bb><\/em><\/strong><\/p>\n

function startTime(){<\/em><\/strong><\/p>\n

today=new Date();<\/em><\/strong><\/p>\n

h=today.getHours();<\/em><\/strong><\/p>\n

m=today.getMinutes();<\/em><\/strong><\/p>\n

s=today.getSeconds();<\/em><\/strong><\/p>\n

m=checkTime(m);<\/em><\/strong><\/p>\n

s=checkTime(s);<\/em><\/strong><\/p>\n

document.getElementById(‘reloj’).innerHTML=h+\u00bb:\u00bb+m+\u00bb:\u00bb+s;<\/em><\/strong><\/p>\n

t=setTimeout(‘startTime()’,500);}<\/em><\/strong><\/p>\n

function checkTime(i)<\/em><\/strong><\/p>\n

{if (i<10) {i=\u00bb0″ + i;}return i;}<\/em><\/strong><\/p>\n

window.onload=function(){startTime();}<\/em><\/strong><\/p>\n

<\/script><\/em><\/strong><\/p>\n

<div id=\u00bbreloj\u00bb style=\u00bbfont-family: \u2018DS-Digital\u2019; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center \u00ab><\/div><\/em><\/strong><\/p>\n

\u00bfPodr\u00e1s aplicar estilos a este reloj digital hasta conseguir el siguiente aspecto?<\/p>\n

<\/p>\n

Una vez conseguida esta presentaci\u00f3n, te animo a publicar el c\u00f3digo, es un ejercicio muy gratificante.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Todos nuestros alumnos\u00a0 que han cursado el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web, \u00a0conocen que Javascripts es un lenguaje que se ejecuta en el lado del cliente. Permitiendo esto una serie de funcionalidades que hacen que la p\u00e1gina cambie su contenido sin necesidad de llamadas al servidor, es decir, cambia de aspecto en el navegador de nuestro ordenador. Una de estas funcionalidad es la de mostrar el fecha y hora actual en nuestra web. Hay muchos programas de edici\u00f3n web y CMS que permiten a\u00f1adir esta funcionalidad a nuestras webs, pero para los que buscamos profundizar un poco m\u00e1s, nos gusta saber como hacerlo manualmente, y as\u00ed aportar nuestro toque personal. Para ello tambi\u00e9n podemos usar CSS. Las funciones m\u00e1s usadas para esta funcionalidad son: Funci\u00f3n Descripci\u00f3n getDate() Devuelve el d\u00eda del mes (entre el 1 y el 31) getDay() Devuelve el d\u00eda de la semana (entre el 0 y el 6) getMonth() Devuelve el mes (entre el 0 y el 11) getFullYear() Devuelve el a\u00f1o (en formato de 4 d\u00edgitos) getHours() Devuelve la hora (entre el 0 y el 24) getMinutes() Devuelve los minutos (desde 0 a 59) getSeconds() Devuelve los segundos (desde 0 a 59) […]<\/p>\n","protected":false},"author":3,"featured_media":3778,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[18,594,1],"tags":[725,703,528,706,489,550,530,566,133,236,157,62,724,546,65,722,726,78],"jetpack_featured_media_url":"http:\/\/piloto.foc.es\/wp-content\/uploads\/2017\/08\/Reloj-Digital-JS.png","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3219,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3219-rendera-herramienta-0nline-para-aprender-programar-sin-necesidad-de-instalacion.html","url_meta":{"origin":3766,"position":0},"title":"Rendera: herramienta 0nline para aprender programar. \u00a1Sin necesidad de instalaci\u00f3n!","date":"13 febrero, 2017","format":false,"excerpt":"Todos los que programamos tenemos la necesidad, de poder probar el c\u00f3digo que desarrollamos de forma r\u00e1pida y eficiente. Para ello, necesitamos un entorno m\u00ednimo de programaci\u00f3n instalado en nuestro ordenador. Ahora sin necesidad de instalaci\u00f3n y todo Online, puedes escribir c\u00f3digo, HTML, CSS y JavaScripts y ver de forma\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"Rendera-Hola_Mundo","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/10\/Rendera-Hola_Mundo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3196,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3196-coloca-en-las-webs-que-publiques-efectos-llamativos-para-atraer-a-mas-visitantes.html","url_meta":{"origin":3766,"position":1},"title":"Coloca en las webs que publiques, efectos llamativos para atraer a m\u00e1s visitantes.","date":"13 febrero, 2017","format":false,"excerpt":"Los alumnos que\u00a0 realizan nuestro certificado de profesionalidad\u00a0 IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web,\u00a0 ser\u00e1n capaces de desarrollar p\u00e1ginas webs con efectos visuales, que llamen la atenci\u00f3n de los visitantes y as\u00ed generar m\u00e1s visitas en las webs que \u00a0publiquen. En la publicaci\u00f3n de hoy \u00a0explicamos c\u00f3mo hacer que los\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"Efecto_colores","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/07\/Efecto_colores.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3189,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3189-aprende-a-programar-efectos-web-de-forma-rapida-y-sencilla.html","url_meta":{"origin":3766,"position":2},"title":"Aprende a programar efectos web de forma r\u00e1pida y sencilla.","date":"13 febrero, 2017","format":false,"excerpt":"Haz con nosotros el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web, \u00a0aprender\u00e1s a programar efectos como los siguientes, de forma sencilla, eficiente y atractiva para el usuario. Efecto ocultar Panel 1 al hacer clic en el bot\u00f3n Button 1 Efecto visualizar Panel 1 al pasar el rat\u00f3n por\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"ejemplo001","src":"https:\/\/i1.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/06\/ejemplo001.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3199,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3199-aplica-efectos-llamativos-a-las-imagenes-que-publiques-en-tus-webs-seras-un-experto-programador-web.html","url_meta":{"origin":3766,"position":3},"title":"Aplica efectos llamativos a las im\u00e1genes que publiques en tus webs. Ser\u00e1s un experto programador web.","date":"13 febrero, 2017","format":false,"excerpt":"Si realizas alguno de los siguientes certificados de profesionalidad con nosotros: IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web. IFCD0110-Confecci\u00f3n y publicaci\u00f3n de p\u00e1ginas web Ser\u00e1s capaz de aplicar efectos llamativos a las im\u00e1genes que publiques en tus webs de forma sencilla y eficiente. De esta forma mejorar\u00e1s la presentaci\u00f3n del tus\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"web Mostrar Ocultar","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/07\/web-Mostrar-Ocultar.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3581,"url":"http:\/\/piloto.foc.es\/2017\/06\/06\/3581-programar-efectos-sencillos-en-javascript-de-forma-rapida-y-eficiente.html","url_meta":{"origin":3766,"position":4},"title":"Programar efectos sencillos en JavaScript, de forma r\u00e1pida y eficiente.","date":"6 junio, 2017","format":false,"excerpt":"Con JavaScript podemos conseguir efectos sencillos y muy visuales en nuestras p\u00e1ginas web. Nuestros alumnos de IFCD0210 Desarrollo de Aplicaciones con Tecnolog\u00edas Web conocen bien como hacer estos efectos r\u00e1pidamente y de forma sencilla. Os propongo el siguiente ejercicio, vamos pintar en pantalla una tabla. Para ello nuestra peque\u00f1a aplicaci\u00f3n\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"","src":"https:\/\/i1.wp.com\/piloto.foc.es\/wp-content\/uploads\/2017\/06\/pantalla-003-06-06-17.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3335,"url":"http:\/\/piloto.foc.es\/2017\/04\/04\/3335-ejemplo-de-script-para-proteger-el-codigo-fuente-de-nuestra-pagina-web.html","url_meta":{"origin":3766,"position":5},"title":"Ejemplo de script para proteger el c\u00f3digo fuente de nuestra p\u00e1gina web","date":"4 abril, 2017","format":false,"excerpt":"Con un sencillo Script podemos proteger nuestro c\u00f3digo web y evitar que aquellos que andan con falta de inspiraci\u00f3n o con pocas \u00a0ganas de \u201ccurr\u00e1rselo\u201d, puedan robarnos nuestro c\u00f3digo web. Despu\u00e9s de probar muchos m\u00e9todos puedo deciros que ninguno es seguro, la mayor\u00eda se limitan a bloquear el bot\u00f3n derecho\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_shortlink":"https:\/\/wp.me\/p6jO3Y-YK","amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3766"}],"collection":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/comments?post=3766"}],"version-history":[{"count":9,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3766\/revisions"}],"predecessor-version":[{"id":3777,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3766\/revisions\/3777"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media\/3778"}],"wp:attachment":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media?parent=3766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/categories?post=3766"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/tags?post=3766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}