Cut & Paste JavaScript Alarm clock

Home / Free JavaScripts / Clocks, Calenders, And Timers / Here

Cut & Paste JavaScript Alarm clock

Credit: JavaScript Kit

Description: This is a "24 hour cycle" JavaScript alarm clock that performs a custom action (by going to any page on the web) when the desired target time has been reached. For example, you can have the script go to YouTube and play a music video as your custom "waker upper." A flexible JavaScript timer and alarm script!

Example:

Directions

Step 1: Insert the below into the <HEAD> section of your page:

<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"> /*********************************************** * JavaScript Alarm Clock- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ 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) //If still within range of hours field: 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>

Step 2: Insert the below into the <BODY> section of your page:

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info