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

Nesse tutorial veremos como criar um relógio digital usando jQuery.
Um relógio digital é um tipo de relógio que mostra a hora de forma digital.
Regras do Jogo da Velha
Vejamos um Exemplo:
Nesse exemplo vamos criar um relógio digital que mostra a hora e o dia da semana do sistema. Além disso você pode alterar a aparência (tema) do relógio para dois tipos meidante o pressionamento de um botão:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <meta http-equiv = "X-UA-Compatible" content = "ie=edge"> <title>Tutorial para Criar um Relógio Digital</title> <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"> </script> <style> body { text-align: center; } a { outline: none; color: #389dc1; } a:visited { outline: none; color: #389dc1; } a:hover { text-decoration: none; } section, footer, header, aside { display: block; } #clock { width: 370px; padding: 40px; margin: 100px auto 60px; position: relative; } #clock:after { content: ' '; position: absolute; width: 400px; height: 20px; border-radius: 100%; left: 50%; margin-left: -200px; bottom: 2px; z-index: -1; } #clock .display { text-align: center; padding: 40px 20px 20px; border-radius: 6px; position: relative; height: 54px; } #clock.light { background-color: #f3f3f3; color: #272e38; } #clock.light:after { box-shadow: 0 4px 10px rgba(0,0,0,0.15); } #clock.light .digits div span { background-color: #272e38; border-color: #272e38; } #clock.light .digits div.dots:before { background-color: #272e38; } #clock.light .digits div.dots:after { background-color: #272e38; } #clock.light .alarm { background:url('../img/alarm_light.jpg'); } #clock.light .display { background-color: #dddddd; box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa; } #clock.dark { background-color: #272e38; color: #cacaca; } #clock.dark:after { box-shadow: 0 4px 10px rgba(0,0,0,0.3); } #clock.dark .digits div span { background-color: #cacaca; border-color: #cacaca; } #clock.dark .alarm { background:url('../img/alarm_dark.jpg'); } #clock.dark .display { background-color: #0f1620; box-shadow: 0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642; } #clock.dark .digits div.dots:before { background-color: #cacaca; } #clock.dark .digits div.dots:after { background-color: #cacaca; } #clock .digits div { text-align: left; position: relative; width: 28px; height: 50px; display: inline-block; margin: 0 4px; } #clock .digits div span { opacity: 0; position: absolute; -webkit-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s; } #clock .digits div span:before { content: ' '; position: absolute; width: 0; height: 0; border: 5px solid transparent; } #clock .digits div span:after { content: ' '; position: absolute; width: 0; height: 0; border: 5px solid transparent; } #clock .digits .d1 { height: 5px; width: 16px; top: 0; left: 6px; } #clock .digits .d1:before { border-width: 0 5px 5px 0; border-right-color: inherit; left: -5px; } #clock .digits .d1:after { border-width: 0 0 5px 5px; border-left-color: inherit; right: -5px; } #clock .digits .d2 { height: 5px; width: 16px; top: 24px; left: 6px; } #clock .digits .d2:before { border-width: 3px 4px 2px; border-right-color: inherit; left: -8px; } #clock .digits .d2:after { border-width: 3px 4px 2px; border-left-color: inherit; right: -8px; } #clock .digits .d3 { height: 5px; width: 16px; top: 48px; left: 6px; } #clock .digits .d3:before { border-width: 5px 5px 0 0; border-right-color: inherit; left: -5px; } #clock .digits .d3:after { border-width: 5px 0 0 5px; border-left-color: inherit; right: -5px; } #clock .digits .d4 { width: 5px; height: 14px; top: 7px; left: 0; } #clock .digits .d4:before { border-width: 0 5px 5px 0; border-bottom-color: inherit; top: -5px; } #clock .digits .d4:after { border-width: 0 0 5px 5px; border-left-color: inherit; bottom: -5px; } #clock .digits .d5 { width: 5px; height: 14px; top: 7px; right: 0; } #clock .digits .d5:before { border-width: 0 0 5px 5px; border-bottom-color: inherit; top: -5px; } #clock .digits .d5:after { border-width: 5px 0 0 5px; border-top-color: inherit; bottom: -5px; } #clock .digits .d6 { width: 5px; height: 14px; top: 32px; left: 0; } #clock .digits .d6:before { border-width: 0 5px 5px 0; border-bottom-color: inherit; top: -5px; } #clock .digits .d6:after { border-width: 0 0 5px 5px; border-left-color: inherit; bottom: -5px; } #clock .digits .d7 { width: 5px; height: 14px; top: 32px; right: 0; } #clock .digits .d7:before { border-width: 0 0 5px 5px; border-bottom-color: inherit; top: -5px; } #clock .digits .d7:after { border-width: 5px 0 0 5px; border-top-color: inherit; bottom: -5px; } #clock .digits div.one .d5 { opacity: 1; } #clock .digits div.one .d7 { opacity: 1; } #clock .digits div.two .d1 { opacity: 1; } #clock .digits div.two .d5 { opacity: 1; } #clock .digits div.two .d2 { opacity: 1; } #clock .digits div.two .d6 { opacity: 1; } #clock .digits div.two .d3 { opacity: 1; } #clock .digits div.three .d1, #clock .digits div.three .d5, #clock .digits div.three .d2, #clock .digits div.three .d7, #clock .digits div.three .d3 { opacity: 1; } #clock .digits div.four .d5, #clock .digits div.four .d2, #clock .digits div.four .d4, #clock .digits div.four .d7 { opacity: 1; } #clock .digits div.five .d1, #clock .digits div.five .d2, #clock .digits div.five .d4, #clock .digits div.five .d3, #clock .digits div.five .d7 { opacity: 1; } #clock .digits div.six .d1, #clock .digits div.six .d2, #clock .digits div.six .d4, #clock .digits div.six .d3, #clock .digits div.six .d6, #clock .digits div.six .d7 { opacity: 1; } #clock .digits div.seven .d1, #clock .digits div.seven .d5, #clock .digits div.seven .d7 { opacity: 1; } #clock .digits div.eight .d1, #clock .digits div.eight .d2, #clock .digits div.eight .d3, #clock .digits div.eight .d4, #clock .digits div.eight .d5, #clock .digits div.eight .d6, #clock .digits div.eight .d7 { opacity: 1; } #clock .digits div.nine .d1, #clock .digits div.nine .d2, #clock .digits div.nine .d3, #clock .digits div.nine .d4, #clock .digits div.nine .d5, #clock .digits div.nine .d7 { opacity: 1; } #clock .digits div.zero .d1, #clock .digits div.zero .d3 { opacity: 1; } #clock .digits div.zero .d4 { opacity: 1; } #clock .digits div.zero .d5 { opacity: 1; } #clock .digits div.zero .d6 { opacity: 1; } #clock .digits div.zero .d7 { opacity: 1; } #clock .digits div.dots { width: 5px; } #clock .digits div.dots:before { width: 5px; height: 5px; content: ' '; position: absolute; left: 0; top: 14px; } #clock .digits div.dots:after { width: 5px; height: 5px; content: ' '; position: absolute; left: 0; top: 14px; } #clock .digits div.dots:after { top: 34px; } #clock .alarm { width: 16px; height: 16px; bottom: 20px; background: url('../img/alarm_light.jpg'); position: absolute; opacity: 0.2; } #clock .alarm.active { opacity: 1; } #clock .weekdays { font-size: 12px; position: absolute; width: 100%; top: 10px; left: 0; text-align: center; } #clock .weekdays span { opacity: 0.2; padding: 0 10px; } #clock .weekdays span.active { opacity: 1; } #clock .ampm { position: absolute; bottom: 20px; right: 20px; font-size: 12px; } .button-holder { text-align: center; padding-bottom: 100px; } a.button { background-color: #f6a7b3; background-image: -webkit-linear-gradient(top, #f6a7b3, #f0a3af); background-image: -moz-linear-gradient(top, #f6a7b3, #f0a3af); background-image: linear-gradient(top, #f6a7b3, #f0a3af); border: 1px solid #eb9ba7; border-radius: 2px; box-shadow: 0 2px 2px #ccc; color: #fff; text-decoration: none !important; padding: 15px 20px; display: inline-block; cursor: pointer; } a.button:hover { opacity: 0.9; } footer { width: 770px; font: normal 16px Arial, Helvetica, sans-serif; padding: 15px 35px; position: fixed; bottom: 0; left: 50%; margin-left: -420px; background-color:#1f1f1f; background-image: -webkit-linear-gradient(top, #1f1f1f, #101010); background-image: -moz-linear-gradient(top, #1f1f1f, #101010); background-image: linear-gradient(top, #1f1f1f, #101010); border-radius: 2px 2px 0 0; box-shadow: 0 -1px 4px rgba(0,0,0,0.4); z-index:1; } footer a.tz { font-weight: normal; font-size: 16px !important; text-decoration: none !important; display: block; margin-right: 300px; text-overflow: ellipsis; white-space: nowrap; color: #bfbfbf !important; z-index: 1; } footer a.tz:before { content: ' '; background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px; width: 138px; height: 20px; display: inline-block; position: relative; bottom: -3px; } footer .close { position: absolute; cursor: pointer; width: 8px; height: 8px; background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px; top: 10px; right: 10px; z-index: 3; } footer #tzine-actions { position: absolute; top: 8px; width: 500px; right: 50%; margin-right: -650px; text-align: right; z-index: 2; } h1 { line-height: 2em; padding-bottom: 3px; text-transform: none; font-size: 1.7em; font-weight: bold; font-family: "Lucida Console", "Courier New", monospace; color: blue; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } h2 { margin-top: 10px; text-transform: none; font-size: 1.5em; font-weight: bold; font-family: "Lucida Console", "Courier New", monospace; color: red; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } footer #tzine-actions iframe { display: inline-block; height: 21px; width: 95px; position: relative; float: left; margin-top: 8px; } </style> <body> <h1>Exemplo</h1> <h2>Tutorial para Criar um Relógio Digital</h2> <div id = "clock" class = "light"> <div class = "display"> <div class = "weekdays"> </div> <div class = "ampm"> </div> <div class = "alarm"> </div> <div class = "digits"> </div> </div> </div> <div class = "button-holder"> <a class = "button">Alterar o Tema</a> </div> <script> $(function() { var clock = $('#clock'), alarm = clock.find('.alarm'), ampm = clock.find('.ampm'); var digit_to_name = 'zero one two three four five six seven eight nine'.split(' '); var digits = {}; var positions = [ 'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' ]; var digit_holder = clock.find('.digits'); $.each(positions, function(){ if(this == ':') { digit_holder.append('<div class="dots">'); } else { var pos = $('<div>'); for(var i=1; i<8; i++) { pos.append('<span class="d' + i + '">'); } digits[this] = pos; digit_holder.append(pos); } }); var weekday_names = 'SEG TER QUA QUI SEX SAB DOM'.split(' '), weekday_holder = clock.find('.weekdays'); $.each(weekday_names, function() { weekday_holder.append('<span>' + this + '</span>'); }); var weekdays = clock.find('.weekdays span'); (function update_time() { var now = moment().format("hhmmssdA"); digits.h1.attr('class', digit_to_name[now[0]]); digits.h2.attr('class', digit_to_name[now[1]]); digits.m1.attr('class', digit_to_name[now[2]]); digits.m2.attr('class', digit_to_name[now[3]]); digits.s1.attr('class', digit_to_name[now[4]]); digits.s2.attr('class', digit_to_name[now[5]]); var dow = now[6]; dow--; if(dow < 0) { dow = 6; } weekdays.removeClass('active').eq(dow).addClass('active'); ampm.text(now[7]+now[8]); setTimeout(update_time, 1000); })(); $('a.button').click(function() { clock.toggleClass('light dark'); }); }); </script> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar o Jogo da Velha
Tutorial para Criar Efeitos de Digitação >>

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