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 - 53
Tutorial para Criar um Relógio Digital II

Neste tutorial veremos como criar mais um Relógio Digital. Ele utiliza displays de 7 segmentos para mostrar as horas, minutos e segundos. Ele utiliza também o sistema de horas americano, ou seja, AM/PM.
Vejamos então o exemplo:
Nesse exemplo vamos mostrar como criar mais um relógio digital. Para isso vamos utilizar apenas um arquivo html, e as imagens dos números digitais você deve inserir no mesmo diretório do arquivo HTML:
Arquivo relogioDigital-2.html:
<!DOCTYPE html> <html lang="en"> <h2>Relógio Digital II</h2> <head> <title>Relógio Digital II</title> <script type="text/javascript"> var imageclock=new Object() //Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image: imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"] imageclock.instances=0 var preloadimages=[] for (var i=0; i<imageclock.digits.length; i++){ //preload images preloadimages[i]=new Image() preloadimages[i].src=imageclock.digits[i] } imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead var sections=timestring.split(":") if (sections[0]=="0") //If hour field is 0 (aka 12 AM) sections[0]="12" else if (sections[0]>=13) sections[0]=sections[0]-12+"" for (var i=0; i<sections.length; i++){ if (sections[i].length==1) sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />' else sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />' } return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2] } imageclock.display=function(){ var clockinstance=this this.spanid="clockspan"+(imageclock.instances++) document.write('<span id="'+this.spanid+'"></span>') this.update() setInterval(function(){clockinstance.update()}, 1000) } imageclock.display.prototype.update=function(){ var dateobj=new Date() var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />' document.getElementById(this.spanid).innerHTML=currenttimeHTML } </script> <script type="text/javascript"> new imageclock.display() </script> <script src='/google_analytics_auto.js'></script></head> <body> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Relógio Mundial
Tutorial para Criar Bolas Pulando >>

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