Como adicionar um relógio ao HTML. Relógio manual usando CSS3

Já discutimos a criação de relógios com mostrador usando CSS e JavaScript. Neste tutorial faremos o mesmo relógio usando CSS3 para ver como novo padrão muda a abordagem para o desenvolvimento de vários efeitos. A demonstração deste tutorial funcionará apenas em navegadores que suportam a propriedade CSS3 girar(a demonstração NÃO FUNCIONA no IE6).

Transformar: girar- uma nova propriedade CSS 3 que permite girar vários elementos. Usando transformações, você também pode alterar a escala dos elementos, introduzir distorções horizontais e verticais e mover elementos em uma página da web. Tudo isso pode ser animado usando a propriedade transição(Com tipos diferentes transições e duração).

As mesmas ações para animar elementos da página podem ser realizadas usando alguma biblioteca JavaScript (por exemplo, jQuery). Claro, com usando jQuery você pode animar a mudança de muito mais Propriedades CSS do que usar transição. Mas jQuery é uma ferramenta CSS integrada, bibliotecas JavaScript são ferramentas externas que podem não estar disponíveis. De qualquer forma, CSS3 abre novas direções promissoras para o desenvolvimento do desenvolvedor.

Primeiro precisamos fazer GUI para relógios. Teremos uma base e três flechas. Todas as partes móveis são cortadas no Photoshop em dimensões de 600px de altura e 30px de largura e são posicionadas verticalmente e, por padrão, a propriedade girar gira o elemento em torno do centro. Você pode usar a propriedade origem da transformação para definir o centro de rotação para um ponto diferente.

Você pode usar qualquer imagem que desejar para a base do relógio. As partes móveis são imagens Formato PNG com transparência.

Arquivado com código fonte demonstrações incluídas Arquivo PSD, que contém todas as imagens.

O layout do relógio é uma lista simples e não ordenada. Cada elemento da lista contém uma parte móvel e um id correspondente:

#clock (posição: relativa; largura: 600px; altura: 600px; margem: 20px auto 0 auto; background: url(clockface.jpg); estilo de lista: nenhum; ) #sec, #min, #hour (posição: absoluto ; largura: 30px; altura: 600px; topo: 0px; índice z: 1; )

O CSS também é bastante simples. Como as peças móveis têm mesmos tamanhos e pontos de partida, então podemos declará-los juntos para evitar repetições. Elemento ul recebe posicionamento relativo, o que permite posicionamento absoluto para as setas localizadas dentro dele.

CSS3 será aplicado usando código pequeno jQuery.

Deve-se notar que o jQuery funciona muito bem com as novas propriedades CSS3. Além disso, como os estilos são adicionados dinamicamente, o arquivo CSS é validado como CSS2.1!

A hora também pode ser obtida usando código PHP, mas será a hora do servidor. E o JavaScript retorna a hora local do usuário.

Receberemos informações usando Data() e definir todas as nossas variáveis. Usaremos de acordo ObterSegundos(), ObterMinutos() ou Obterhoras() Para Data() para definir segundos, minutos e horas respectivamente:

Var segundos = new Date().getSeconds();

Na linha acima, um número no intervalo de 0 a 59 será obtido e atribuído a uma variável segundos.

Então você precisa calcular o ângulo de rotação de cada seta. Para os ponteiros dos segundos e dos minutos, que possuem 60 posições no círculo das horas, precisamos dividir 360 graus por 60, o que nos dá o número 6. Ou seja, cada segundo ou minuto corresponde a uma rotação de 6 graus. Armazenaremos o resultado dos cálculos em outra variável. Por segundos o código fica assim:

Grau Var = segundos * 6;

Durante horas os cálculos serão diferentes. Como temos um mostrador com 12 posições para o ponteiro das horas, cada hora corresponde a um ângulo de rotação de 30 graus (360/12=30). Mas o ponteiro das horas também deve estar em estados intermediários, ou seja, deve mover-se a cada minuto. Ou seja, às 4h30 o ponteiro das horas deve estar a meio caminho entre 3 e 4 horas. Veja como faremos isso:

Var hdegree = horas * 30 + (mins/2);

Ou seja, somamos ao ângulo de rotação pelo número de horas o valor da divisão do número de minutos por 2 (o que nos dará um valor na faixa de 0,5 a 29,5). Assim, o ponteiro das horas será “girado” em um ângulo de 0 a 30 graus (incremento de hora).

Por exemplo:

2 horas e 40 minutos -> 2*30 = 60 graus e 40/2 = 20 graus. Total: 80 graus.

Podemos supor que o relógio mostrará sabe-se lá o quê depois das 12, já que o valor da rotação será superior a 360 graus. Mas tudo funciona bem.

Agora estamos prontos para inserir regras CSS.

Esta é a aparência de uma regra CSS3 girar na folha de estilo:

#sec ( -webkit-transform: girar(45deg); -moz-transform: girar(45deg); )

E é assim que o código será inserido usando jQuery:

$("#sec").css(("-moz-transform" : "girar(45deg)", "-webkit-transform" : "girar(45deg)"));

O único problema é definir o valor do ângulo resultante na variável "sdegree" na sintaxe em vez de 45 graus. Precisa construir uma string em outra variável girar e substitua completamente o segundo argumento. Assim:

Var srotate = "rotate(" + grau + "deg)";

UM código jQuery ficará assim:

$("#sec").css(("-moz-transform": srotate, "-webkit-transform": srotate));

O código jQuery ficará assim:

$(document).ready(function() ( setInterval(function() ( var segundos = new Date().getSeconds(); var sdegree = segundos * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)), 1000); .getHours(); var mins = new Date().getMinutes(); var hdegree = horas * 30 + (mins / 2); ("-moz-transform": hrotate, "-webkit-transform": hrotate)); 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = mins * 6 ; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) );

Nós usamos Função JavaScript setInterval para atualizar estilos a cada segundo. Nele devem ser atualizadas variáveis ​​que recebem valores de tempo. Caso contrário, o relógio se tornará um lixo inútil na página.

Esta lição demonstra a aplicação prática da propriedade girar não relacionado ao design.

Vamos fazer um relógio eletrônico com data e hora usando jQuery e CSS3 para uma pequena animação.

A marcação é simples e flexível. Crie um DIV com uma classe chamada clock , um DIV com uma classe chamada Date que exibirá a data e uma lista não ordenada contendo horas, minutos e segundos.

Estilos de design com pequenas animações:

Container (largura: 960px; margem: 0 automático; overflow: oculto;) .clock (largura:800px; margem:0 automático; preenchimento:30px; borda:1px sólido #333; cor:#fff; ) #Date ( fonte- família: Arial, Helvetica, sans-serif; text-align:center; text-shadow:0 0 5px #00c6ff; ul (largura:800px; margem:0 automático; preenchimento:0px; estilo de lista:none; alinhamento de texto :center; ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point (posição: relativo; -moz-animation:mymove 1s facilita infinito; -webkit-animation:mymove 1s facilita infinito; padding-left:10px; -shadow:0 0 20px #00c6ff;) 50% (opacidade:0; text-shadow:none; ) 100% (opacidade:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (opacidade: 1,0; sombra do texto: 0 0 20px #00c6ff;) 50% (opacidade: 0; sombra do texto: nenhum; ) 100% (opacidade: 1,0; sombra do texto: 0 0 20px #00c6ff; ) )

Conectando a biblioteca jQuery

E então nosso script $(document).ready(function() ( // Cria duas variáveis ​​com os nomes dos meses e dias da semana no array varmonthNames = [ "January", "February", "March", " Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro" ]; var dayNames= ["Domingo", "Segunda-feira", "Terça-feira ", "Wednesday" ,"Thursday","Friday","Saturday"] // Cria um objeto newDate() var newDate = new Date(); // Recupera a data atual do objeto Date newDate.setDate(newDate. getDate()); // Saída de dia, data, mês e ano $("#Date").html(dayNames + " " + newDate.getDate() + " " +monthNames + " " + newDate.getFullYear()) ; setInterval(function() ( / / Crie um objeto newDate() e recupere os segundos do tempo atual var segundos = new Date().getSeconds(); // Adicione um zero à esquerda ao valor dos segundos $("#sec ").html((segundos< 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });

• new Date() - cria um novo objeto Date com o valor da data e hora atuais no navegador do computador.
• setDate() - método define o dia do mês (de 1 a 31), de acordo com o horário local
• getDate() - método retorna o dia do mês (de 1 a 31) para a data especificada de acordo com a hora local
• getSeconds(), getMinutes() e getHours() – Esses métodos permitem recuperar os segundos, minutos e horas da hora atual no navegador.
• (segundos< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• A função setInterval é uma função JavaScript padrão, não faz parte do jQuery. Executa o código várias vezes, em intervalos regulares (milissegundos).

Este é o script principal:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

setInterval(função()(
data = nova data(),
h = data.getHoras(),
m = data.getMinutos(),
s = data.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("tempo").innerHTML = h + ":" + m + ":" + s;
}, 1000);

No topo vemos:

200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00

Basta adicionar texto em negrito e um tom amarelo e setas.

200?"200px":""+(this.scrollHeight+5)+"px");">"00:00:00"

E foi isso que aconteceu:

Assim, você pode ver por si mesmo como tudo mudou e agora pode fazer tudo sozinho e organizá-lo lindamente de acordo com seu estilo. Que outros não podem ser feitos, já que o Flash está aí, que eles não estão aqui.

Agora além disso há um relógio no Flash

200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">

Então você pode escolher quais você mais gosta e instalá-los, pois alguns podem ser instalados em bloco, mas você gosta mais dos primeiros, pois são flexíveis e personalizáveis, o que qualquer pessoa pode fazer.

Este é um script simples que mostra hora do sistema em JavaScript em texto simples. Horas, minutos e segundos separados por dois pontos - isso é tudo.

Para definir seu próprio estilo de relógio, basta definir o estilo do bloco com ID - #time. No CSS você pode definir sua própria fonte para o relógio, sua cor e tamanho. Se você não precisa de um relógio simples, mas de um mais complexo, dê uma olhada nos relógios Flash do site. De onde o script obtém os dados de tempo? A hora mostrada é exatamente a definida no dispositivo.

Cole o código a seguir no local do site onde deseja ver o relógio. No uCoz poderia ser, por exemplo, “Topo” ou “Parte inferior do site”:

200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00

setInterval(função()(
data = nova data(),
h = data.getHoras(),
m = data.getMinutos(),
s = data.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("tempo").innerHTML = h + ":" + m + ":" + s;
}, 1000);

O script mostrará imediatamente uma linha de texto com um relógio no local onde você o instalou. Por exemplo, "00:00:00". Segundos, minutos e horas, aliás, são sempre de dois dígitos, então a alteração dos valores ocorre sem problemas.