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 - 51
Tutorial para Criar um Rel�gio Alarme

Neste tutorial veremos como criar um Rel�gio Alarme para disparar em um tempo pr�-determinado escolhido pelo usu�rio. Este exemplo � um despertador de 24 horas que executa uma a��o personalizada (acessando qualquer p�gina da web) quando o tempo desejado for atingido. Por exemplo, voc� pode fazer com que o script v� para o YouTube e reproduza um videoclipe qualquer ou acessar umm site de sua prefer�ncia.
Vejamos ent�o o exemplo:
Nesse exemplo voc� dever� definir um tempo qualquer (hora, minutos e segundos) e informar que p�gina dever� ser acessada quando esse tempo for alcan�ado. Feito isso, voc� dever� clicar no bot�o 'Ativar Alarme'. Para isso vamos utilizar apenas um arquivo html:
Arquivo relogioAlarme.html:
<!DOCTYPE html> <html lang="en"> <h2>Rel�gio Alarme</h2> <head> <title>Rel�gio Alarme</title> <style type="text/css"> #jsalarmclock{ font-family: Tahoma; font-weight: bold; font-size: 12px; } #jsalarmclock div{ margin-bottom: 0.8em; } #jsalarmclock div.leftcolumn{ float: left; width: 150px; font-size: 13px; background-color: lightyellow; clear: left; } #jsalarmclock span{ margin-right: 5px; } </style> <script type="text/javascript"> var jsalarm={ padfield:function(f){ return (f<10)? "0"+f : f }, showcurrenttime:function(){ var dateobj=new Date() var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateobj.getSeconds()) this.ctref.innerHTML=ct this.ctref.setAttribute("title", ct) if (typeof this.hourwake!="undefined"){ //if alarm is set if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){ clearInterval(jsalarm.timer) window.location=document.getElementById("musicloc").value } } }, init:function(){ var dateobj=new Date() this.ctref=document.getElementById("jsalarm_ct") this.submitref=document.getElementById("submitbutton") this.submitref.onclick=function(){ jsalarm.setalarm() this.value="Alarm Set" this.disabled=true return false } this.resetref=document.getElementById("resetbutton") this.resetref.onclick=function(){ jsalarm.submitref.disabled=false jsalarm.hourwake=undefined jsalarm.hourselect.disabled=false jsalarm.minuteselect.disabled=false jsalarm.secondselect.disabled=false return false } var selections=document.getElementsByTagName("select") this.hourselect=selections[0] this.minuteselect=selections[1] this.secondselect=selections[2] for (var i=0; i<60; i++){ if (i<24) // Se ainda estiver dentro do campo de intervalo de horas: 0-23. this.hourselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getHours()==i) this.minuteselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getMinutes()==i) this.secondselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getSeconds()==i) } jsalarm.showcurrenttime() jsalarm.timer=setInterval(function(){jsalarm.showcurrenttime()}, 1000) }, setalarm:function(){ this.hourwake=this.hourselect.options[this.hourselect.selectedIndex].value this.minutewake=this.minuteselect.options[this.minuteselect.selectedIndex].value this.secondwake=this.secondselect.options[this.secondselect.selectedIndex].value this.hourselect.disabled=true this.minuteselect.disabled=true this.secondselect.disabled=true } } </script> <script src='/google_analytics_auto.js'></script></head> <body> <form action="" method=""> <div id="jsalarmclock"> <div><div class="leftcolumn">Hora Atual:</div> <span id="jsalarm_ct" style="letter-spacing: 2px"></span></div> <div><div class="leftcolumn">Informe o tempo:</div> <span><select></select>Hora</span> <span><select></select>Minutos</span> <span><select></select>Segundos</span></div> <div><div class="leftcolumn">Informe o link:</div> <input type="text" id="musicloc" size="55" value="https://simuladosetutoriais.com/tutoriais/jscript/jscript-tut49.html" /> <span style="font: normal 11px Tahoma"><< P�gina a ser acessada</span></div> <input type="submit" value="Ativar Alarme" id="submitbutton" /> <input type="reset" value="Cancelar" id="resetbutton" /> </div> </form> <script type="text/javascript"> jsalarm.init() </script> </body> </html>
Veja na imagem abaixo o resultado desse c�digo::

<< Tutorial para Criar uma Calculadora Simples
Tutorial para Criar um Rel�gio Mundial >>

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