Alarm Clock Using HTML JavaScript

Submitted by: 
Language: 
Visitors have accessed this post 9158 times.

Alarm Clock Using HTML JavaScript

This is a "24-hour cycle" JavaScript alarm clock that opens any web page (depends on what address you input in Set Alarm Action field) according to the time user set up.

This is a very cool system. Try this simple program and you can use it as your alarm.

Hope this work will help you in your project.

JavaScript Source Code

  1. <script type="text/javascript">
  2. var jsalarm={
  3. padfield:function(f){
  4. return (f<10)? "0"+f : f
  5. },
  6. showcurrenttime:function(){
  7. var dateobj=new Date()
  8. var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateobj.getSeconds())
  9. this.ctref.innerHTML=ct
  10. this.ctref.setAttribute("title", ct)
  11. if (typeof this.hourwake!="undefined"){ //if alarm is set
  12. if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){
  13. clearInterval(jsalarm.timer)
  14. window.location=document.getElementById("musicloc").value
  15. }
  16. }
  17. },
  18. init:function(){
  19. var dateobj=new Date()
  20. this.ctref=document.getElementById("alarm_alarm")
  21. this.submitref=document.getElementById("submit_submit")
  22. this.submitref.onclick=function(){
  23. jsalarm.setalarm()
  24. this.value="Alarm Set"
  25. this.disabled=true
  26. return false
  27. }
  28. this.resetref=document.getElementById("reset_reset")
  29. this.resetref.onclick=function(){
  30. jsalarm.submitref.disabled=false
  31. jsalarm.hourwake=undefined
  32. jsalarm.hourselect.disabled=false
  33. jsalarm.minuteselect.disabled=false
  34. jsalarm.secondselect.disabled=false
  35. return false
  36. }
  37. var selections=document.getElementsByTagName("select")
  38. this.hourselect=selections[0]
  39. this.minuteselect=selections[1]
  40. this.secondselect=selections[2]
  41. for (var i=0; i<60; i++){
  42. if (i<24) //If still within range of hours field: 0-23
  43. this.hourselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getHours()==i)
  44. this.minuteselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getMinutes()==i)
  45. this.secondselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getSeconds()==i)
  46. }
  47. jsalarm.showcurrenttime()
  48. jsalarm.timer=setInterval(function(){jsalarm.showcurrenttime()}, 1000)
  49. },
  50. setalarm:function(){
  51. this.hourwake=this.hourselect.options[this.hourselect.selectedIndex].value
  52. this.minutewake=this.minuteselect.options[this.minuteselect.selectedIndex].value
  53. this.secondwake=this.secondselect.options[this.secondselect.selectedIndex].value
  54. this.hourselect.disabled=true
  55. this.minuteselect.disabled=true
  56. this.secondselect.disabled=true
  57. }
  58. }
  59. </script>

Form Field

  1. <form action="" method="">
  2. <div id="jsalarmclock">
  3.  
  4. <div>
  5. <div class="leftcolumn">Current Time:</div>
  6. <span id="alarm_alarm" style="letter-spacing: 2px"></span>
  7. </div>
  8.  
  9. <div>
  10. <div class="leftcolumn">Set Alarm:</div>
  11. <span><select class="select_menu"></select> Hour</span>
  12. <span><select class="select_menu"></select> Minutes</span>
  13. <span><select class="select_menu"></select> Seconds</span>
  14. </div>
  15.  
  16. <div>
  17. <div class="leftcolumn">Set Alarm Action:</div>
  18. <input type="text" class="text_menu" id="musicloc" size="55" value="<a href="https://www.youtube.com/watch?v=wU2BDZkv17k"" rel="nofollow">https://www.youtube.com/watch?v=wU2BDZkv17k"</a> />
  19. <span style="font: normal 11px Tahoma">
  20. <p style=" margin-left: 150px; color: blue; font-size: 15px; font-weight: bold;">Location of page to launch</p>
  21. </span>
  22. </div>
  23.  
  24. <input type="submit" class="button_menu" value="Set Alarm!" id="submit_submit" />
  25. <input type="reset" class="button_menu" value="reset" id="reset_reset" />
  26.  
  27. </div>
  28. </form>

And, this is the style.

  1. <style type="text/css">
  2.  
  3. body {
  4. color:blue;
  5. }
  6.  
  7. #jsalarmclock{
  8. font-family: Tahoma;
  9. font-weight: bold;
  10. font-size: 12px;
  11. }
  12.  
  13. #jsalarmclock div{
  14. margin-bottom: 0.8em;
  15. }
  16.  
  17. #jsalarmclock div.leftcolumn{
  18. float: left;
  19. width: 150px;
  20. font-size: 13px;
  21. clear: left;
  22. }
  23.  
  24. #jsalarmclock span{
  25. margin-right: 5px;
  26. }
  27.  
  28. .button_menu {
  29. width: 100px;
  30. height: 28px;
  31. background-color: buttonface;
  32. border: 1px solid red;
  33. border-radius: 10px;
  34. color: blue;
  35. font-size:18px;
  36. }
  37.  
  38. .select_menu {
  39. width: 100px;
  40. height: 28px;
  41. background-color: buttonface;
  42. border: 1px solid red;
  43. border-radius: 10px;
  44. color: red;
  45. }
  46.  
  47. .text_menu {
  48. width: 400px;
  49. height: 28px;
  50. background-color: buttonface;
  51. border: 1px solid red;
  52. border-radius: 10px;
  53. color: blue;
  54. }
  55.  
  56. </style>

Output:

Result

Kindly click the "Download Code" button below to get the full source code and you can edit whatever you want to Set Alarm Action field either in online link address or in the offline.

So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.