HTML5 Digital clock Alarm Clock program code

In the last article, we introduced how to make a digital clock, today I would like to introduce in this article in the digital clock on the basis of an increase in the set alarm bell function. The HTML5 audio element is used in this article to invoke the Bell audio.

Want to extend the effect of the alarm clock on the digital clock clock, need to do 1, to have a can edit set the alarm clock time of the interface; 2, listen every second whether to ring time, if to the bell time then pop-up reminders and play the Bell audio.
Html
We used the previous article to use jquery and CSS3 to make the HTML structure of the digital clock (jquery), to increase the alarm element, to increase the alarm popup interface, to increase the bell reminder interface and the audio audio element.

The code is as follows

Copy Code

<div id= "Clock" class= "Light" > <div class= "Display" > <div class= "Date" ></div> <div class= "Alarm" ></div> <div class= "digits" ></div> </div> </div> <!--set alarm time pop-up layer--> <div class= "Overlay" id= "settime" > <div id= "Alarm-dialog" > <label class= "Hours" > When <input type= "number" value= "0" min= "0"/> </label> <label class= "Minutes" > Part <input type= "number" value= "0" min= "0"/> </label> <label class= "Seconds" > Seconds <input type= "number" value= "0" min= "0"/> </label> <div class= "Button-holder" > <a id= "Alarm-set" class= "button Blue" > Settings </a> </div> <a class= "Close" ></a> </div> </div> <!--time to reminder pop-up layer--> <div class= "Overlay" id= "Timeisup" > <div id= "Time-is-up" > <div class= "Button-holder" > <a class= "button Blue" > Off </a> </div> </div> </div> <!--load Audio--> <audio id= "Ring" preload> <source src= "Audio/ticktac.mp3" type= "Audio/mpeg"/> <source src= "Audio/ticktac.ogg" type= "Audio/ogg"/> </audio>

Jquery
First of all, we use CSS will set time and time to the two pop-up layer hidden, specifically see the demo in the CSS, here is not detailed. Then when clicking on the alarm icon next to the clock, show the pop-up layer #settime, minutes to display when the form is set, click the "Settings" button, we want to enter the time number to verify, specifically, see the following code:

The code is as follows

Copy Code

$ (function () { To define an initial count variable var alarm_counter =-1; Call Set Time interface $ ('. Alarm '). Click (function () { $ ("#settime"). Show (); }); $ (' A.close '). Click (function () { $ ("#settime"). Hide (); }); Set time $ ("#alarm-set"). Click (function () { var valid = true, after = 0, To_seconds = [3600, 60, 1]; $ ("#settime"). Find (' input '). Each (function (i) { if (this.validity &&!this.validity.valid) { valid = false; This.focus (); return false; } After + = to_seconds[i] * parseint (parseint (this.value)); }); if (!valid) { Alert (' Please enter a valid number! '); Return } if (after < 1) { Alert (' Please enter a valid time! '); Return } Set count variable Value Alarm_counter = after; $ ("#settime"). Hide (); }); $ ("#timeisup"). Click (function () { $ ("#timeisup"). fadeout (); $ ("#settime"). Find (' input '). attr (' value ', ' 0 '); }); }); Then we have to perform update_time () function in every second to judge, judge the value of the count variable alarm_counter, if the value of Alarm_counter is greater than 0, indicating that the bell time is not yet, this time counting variable minus 1, Alarm icon style in Active state If Alarm_counter is just equal to 0, it shows the bell time, then pops up the "time to" reminder layer and plays audio, if Alarm_counter is less than 0, then the bell is not working. $ (function () { ... Let the clock run. (function Update_time () { ... Alarm clock var alarm = $ (". Alarm"); if (Alarm_counter > 0) { alarm_counter--; Alarm.addclass (' active '); } else if (alarm_counter = 0) { $ ("#timeisup"). FadeIn (); Play a sound on a browser that supports HTML audio try{ $ ("#ring") [0].play (); } catch (e) {} alarm_counter--; Alarm.removeclass (' active '); } else{ Alarm.removeclass (' active '); } Run once per second SetTimeout (update_time, 1000); })(); });

The above code to clean up, you can see the effect of the demo, you can also download the demo in the source code to learn, note that audio audio elements need to support HTML5 browser will have effect.