JavaScript Alarm Clock


Landing time:
Alarm will write here in 1 minute:
Default clock:
Clock with custom time format and timezone:
Clock that ticks every 5 seconds:
Recurrent alarm (every 7 seconds):


<script type="text/javascript" src="date.format.min.js"></script> <script type="text/javascript" src="alarm-clock.min.js"></script> <script type="text/javascript"> <!-- function alarm1_callback(timeStr, message) { document.getElementById("alarm1").innerHTML = timeStr + ": " + message; alert("The time is: "+timeStr+", the message is: "+message); } function alarm2_callback(timeStr, message) { var now = new Date(); var elapsed = Math.floor((now.getTime() - message) / 1000); document.getElementById("alarm2").innerHTML = timeStr + ": elapsed " + elapsed + " seconds"; } window.onload = function() { var now = new Date(); var one_min = new Date(now.getTime() + 60000); var alarm1 = new Alarm({date:one_min, alarmCallback:alarm1_callback, message:"1 minute passed!"}); document.getElementById("landing").innerHTML = alarm1.toTimeStr("yyyy. mmmm dd. dddd HH:MM:ss"); var clock1 = new Clock({id:"clock1"}); var clock2 = new Clock({id:"clock2", format:"HH:MM Z", tz:"+0330"}); var clock3 = new Clock({id:"clock3", interval:5000}); var now_7s = new Date(now.getTime() + 7000); var alarm2 = new Alarm({date:now_7s, recurrent:7000, alarmCallback:alarm2_callback, message:now.getTime()}); } // --> </script> <div class="example"> <div>Landing time: <span id="landing"></span></div> <div>Alarm will write here in 1 minute: <span id="alarm1"></span></div> <div>Default clock: <span id="clock1"></span></div> <div>Clock with custom time format and timezone: <span id="clock2"></span></div> <div>Clock that ticks every 5 seconds: <span id="clock3"></span></div> <div>Recurrent alarm (every 7 seconds): <span id="alarm2"></span></div> </div>


You need to download alarm-clock.js and optionally date.format.js if you want to use date formats.

You can read about time format strings here.

Below are some translations for date format: