Esta é uma tradução deste ótimo e simples tutorial desenvolvido por Alessio Atzeni.
Esse código é realmente simples e flexivel. Ele adapta-se em muitos layouts. Crie um div “Clock” e Div Id “Date”, ela conterá seus dados. Defina uma lista que contenha sua hora, minuto e segundos como no exemplo abaixo:
|
<div class="clock"> |
A estilização com CSS é facil, você pode criar resultados infinitos com sua criatividade, o código abaixo é apenas em modelo de definição para suas futuras aplicações.
| /* If you want you can use font-face */<br /> @font-face {<br /> font-family: ‘BebasNeueRegular’;<br /> src: url(‘BebasNeue-webfont.eot’);<br /> src: url('/‘BebasNeue-webfont.eot?#iefix’') format(‘embedded-opentype’),<br /> url(‘BebasNeue-webfont.woff’) format(‘woff’),<br /> url(‘BebasNeue-webfont.ttf’) format(‘truetype’),<br /> url(‘BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);<br /> font-weight: normal;<br /> font-style: normal;<br /> }</p> <p>.container {width: 960px; margin: 0 auto; overflow: hidden;}</p> <p>.clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; }</p> <p>#Date { font-family:’BebasNeueRegular’, Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; }</p> <p>ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; }<br /> ul li { display:inline; font-size:10em; text-align:center; font-family:’BebasNeueRegular’, Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }</p> <p>#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; }</p> <p>/* Simple Animation */<br /> @-webkit-keyframes mymove<br /> {<br /> 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}<br /> 50% {opacity:0; text-shadow:none; }<br /> 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }<br /> }</p> <p>@-moz-keyframes mymove<br /> {<br /> 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}<br /> 50% {opacity:0; text-shadow:none; }<br /> 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }<br /> } |
jQuery
Esse é o primeiro passo para chamar o arquivo JQuery:
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><br /> |
Crie uma nova Tag de script e insira o código:
|
<script type="text/javascript">
$(document).ready(function() { // Create two variable with the names of the months and days in an array var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]</p> <p>// Create a newDate() object var newDate = new Date(); // Extract the current date from Date object newDate.setDate(newDate.getDate()); // Output the day, date, month and year $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());</p> <p>setInterval( function() { // Create a newDate() object and extract the seconds of the current time on the visitor's var seconds = new Date().getSeconds(); // Add a leading zero to seconds value $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); },1000);</p> <p>setInterval( function() { // Create a newDate() object and extract the minutes of the current time on the visitor's var minutes = new Date().getMinutes(); // Add a leading zero to the minutes value $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); },1000);</p> <p>setInterval( function() { // Create a newDate() object and extract the hours of the current time on the visitor's var hours = new Date().getHours(); // Add a leading zero to the hours value $("#hours").html(( hours < 10 ? "0" : "" ) + hours); }, 1000); }); </script><br />
|
A LÓGICA
New Date() - Cria uma nota data com o valor da data e hora no seu browser.
SetDate() and getDate() - O metodo setDate() define o dia do mês (de 1 à 31), de acordo com a data local enquanto o getDate() gera o dia do mês a partir de um dia específico de acordo com a data local.
GetSeconds(), getMinutes() and getHours() - Esses metodos permitem extrair os segundos, minutos e horas do browser.
( seconds < 10 ? "0" : "" ) + seconds) - Adiciona um zero ao valor dos dos segundos, minutos e horas. Os simbolos ? e : são usados para compreender e incoporar o operador ternário. É um operador especial que retorna o valor antes do caractere (:) se a condição antes do (?) for "true" ou o valor depois do (:) for "false".
SetInterval function - É uma função JavaScript padrão e não parte do jQuery. Você a chama com alguma função para executar o período em milisegundos.
Tags: clock, css, css3, digital, java, javascript, jquery, query, relogio, script, tutorial
