Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 52
Tutorial para Criar um Relógio Mundial

Neste tutorial veremos como criar um Relógio Mundial onde você poderá saber em tempo real a hora em várias cidades do mundo. Para isso basta selecionar a cidade de sua preferência na lista suspensa. Você poderá adicionar mais cidades na lista, desde que saiba a diferença de horários a partir da cidade em que você se encontra. Por exemplo: Las Vegas, Paris, Los Angeles, Miami etc.
Vejamos então o exemplo:
Nesse exemplo você tem a disposição o horário em tempo real de várias cidades do mundo. Para isso vamos utilizar apenas um arquivo html:
Arquivo relogioMundial.html:
<!DOCTYPE html> <html lang="en"> <h2>Relógio Mundial</h2> <head> <title>Relógio Mundial</title> <script src='/google_analytics_auto.js'></script></head> <body> <table border="0" width="200" cellspacing="0" cellpadding="3"> <form name="where"> <tr> <td width="100%"> <select name="city" size="1" onchange="updateclock(this);"> <option value="" selected>Hora Local</option> <option value="0">Londres GMT</option> <option value="1">Roma</option> <option value="7">Bangkok</option> <option value="8">Hong Kong</option> <option value="9">Tóquio</option> <option value="10">Sydney</option> <option value="12">Fiji</option> <option value="-10">Havaí</option> <option value="-8">São Francisco</option> <option value="-5">Nova York</option> <option value="-3">Buenos Aires</option> </select> <p> </td> </tr> <tr> <td width="100%"> <script language="JavaScript"> if (document.all||document.getElementById) document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br />') zone=0; isitlocal=true; ampm=''; function updateclock(z){ zone=z.options[z.selectedIndex].value; isitlocal=(z.options[0].selected)?true:false; } function WorldClock(){ now=new Date(); ofst=now.getTimezoneOffset()/60; secs=now.getSeconds(); sec=-1.57+Math.PI*secs/30; mins=now.getMinutes(); min=-1.57+Math.PI*mins/30; hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone); hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360; if (hr < 0) hr+=24; if (hr > 23) hr-=24; ampm = (hr > 11)?"PM":"AM"; statusampm = ampm.toLowerCase(); hr2 = hr; if (hr2 == 0) hr2=12; (hr2 < 13)?hr2:hr2 %= 12; if (hr2<10) hr2="0"+hr2 var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm; if (document.all) worldclock.innerHTML=finaltime else if (document.getElementById) document.getElementById("worldclock").innerHTML=finaltime else if (document.layers){ document.worldclockns.document.worldclockns2.document.write(finaltime) document.worldclockns.document.worldclockns2.document.close() } setTimeout('WorldClock()',1000); } window.onload=WorldClock //--> </script>  <ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer> </td> </form> </tr> </table> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Relógio Alarme
Tutorial para Criar um Relógio Digital II >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino