HTML

Script - Exemplos - Relógio analógico

Esse script mostra um relógio analógico, independentemente da ação do internauta. As cores dos ponteiros podem ser alteradas.

Código

//Standard Analogue Clock - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

var fCol="#00ff00"; //face colour.
var dCol="#ffffff"; //dots colour.
var hCol="#ff0000"; //hours colour.
var mCol="#ff0000"; //minutes colour.
var sCol="#00ff00"; //seconds colour.

//Alter nothing below! Alignments will be lost!

var dial = "3 4 5 6 7 8 9 10 11 12 1 2";
dial = dial.split(" ");
var e = 360/dial.length;
var h = 3;
var m = 4;
var s = 5;
var y = 50;
var x = 50;
var cyx = 30/4;
var theDial = [];
var theDots = [];
var theHours = [];
var theMinutes = [];
var theSeconds = [];
var idx = document.getElementsByTagName('div').length;
var pix = "px";

document.write('<div style="position:relative;width:'+(x*2)+'px;height:'+(y*2)+'px">');

for (i=0; i < dial.length; i++){
document.write('<div id="F'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;'
+'font-family:arial,sans-serif;font-size:10px;color:'+fCol+';text-align:center">'+dial[i]+'<\/div>');

document.write('<div id="D'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+dCol+'"><\/div>');
}

for (i=0; i < h; i++){
document.write('<div id="H'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+hCol+'"><\/div>');
}

for (i=0; i < m; i++){
document.write('<div id="M'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+mCol+'"><\/div>');
}

for (i=0; i < s; i++){
document.write('<div id="S'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:2px;height:2px;font-size:2px;background-color:'+sCol+'"><\/div>');
}

document.write('<\/div>');

function clock(){
var time = new Date();

var secs = time.getSeconds();
var secOffSet = secs - 15;
if (secs < 15){
secOffSet = secs+45;
}
var sec = Math.PI * (secOffSet/30);

var mins = time.getMinutes();
var minOffSet = mins - 15;
if (mins < 15){
minOffSet = mins+45;
}
var min = Math.PI * (minOffSet/30);

var hrs = time.getHours();
if (hrs > 12){
hrs -= 12;
}
var hrOffSet = hrs - 3;
if (hrs < 3){
hrOffSet = hrs+9;
}
var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;

for (i=0; i < s; i++){
theSeconds[i].top = y + (i*cyx) * Math.sin(sec) + pix;
theSeconds[i].left = x + (i*cyx) * Math.cos(sec) + pix;
}
for (i=0; i < m; i++){
theMinutes[i].top = y + (i*cyx) * Math.sin(min) + pix;
theMinutes[i].left = x + (i*cyx) * Math.cos(min) + pix;
}
for (i=0; i < h; i++){
theHours[i].top = y + (i*cyx) * Math.sin(hr) + pix;
theHours[i].left = x + (i*cyx) * Math.cos(hr) + pix;
}
setTimeout(clock,100);
}

function init(){
for (i=0; i < dial.length; i++){
theDial[i] = document.getElementById("F"+(idx+i)).style;
theDial[i].top = y-6 + 30 * 1.4 * Math.sin(i*e*Math.PI/180) + pix;
theDial[i].left = x-6 + 30 * 1.4 * Math.cos(i*e*Math.PI/180) + pix;
theDots[i] = document.getElementById("D"+(idx+i)).style;
theDots[i].top = y + 30 * Math.sin(e*i*Math.PI/180) + pix;
theDots[i].left= x + 30 * Math.cos(e*i*Math.PI/180) + pix;
}
for (i=0; i < h; i++){
theHours[i] = document.getElementById("H"+(idx+i)).style;
}
for (i=0; i < m; i++){<center>
theMinutes[i] = document.getElementById("M"+(idx+i)).style;
}
for (i=0; i < s; i++){
theSeconds[i] = document.getElementById("S"+(idx+i)).style;
}
clock();
}

if (window.addEventListener){
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onload",init);
}
})();
}//End.

Como colocar o código na página

1a. Criar o arquivo standardclock1.js com o conteúdo acima (toda a seqüência entre //Standard Analogue Clock e //End e colocá-lo na página que está sendo criada entre entre os tags <head> e </head>.

(nomear o arquivo como standardclock1.txt e renomear para js)

ou

1b. Copiar o arquivo js compactado (zip) clicando aqui. Descompactá-lo e deixar o arquivo js resultante com os outros arquivos que compõem a página.

2. Em 1a ou 1b, colocar no código da página, no local onde desejar que apareça o relógio colocar no código da página:

Particularidades

As cores poderão ser escolhidas e alteradas nessa parte do script:

var fCol="#0000ff"; //face colour ... em que #00FF00 = verde,
var dCol="#ffffff"; //dots colour. ... em que #FFFFFF = branco,
var hCol="#ff0000"; //hours colour. ... em que #FF0000 = vermelho,
var mCol="#ff0000"; //minutes colour. ... em que #FF0000 = vermelho,
var sCol="#00ff00"; //seconds colour. ... em que #00FF00 = verde.

Veja detalhes sobre cores e HTML aqui

Exemplo: O tempo não volta

Há um outro exemplo de relógio analógico, do mesmo autor aqui

Esse script foi recebido por e-mail ou gravado a partir de sites visitados.
Desconheço a existência de quaisquer restrições ao seu uso não comercial.
Caso tenha registro, solicito ao detentor entrar em contato.

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?

Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

http://www.cultura.ufpa.br/dicas/htm/htm-scri6.htm

Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 26 mai 2008