» » Digital alarm clock by HTML5

 

Digital alarm clock by HTML5

Author: bamboo06 on 27-10-2014, 04:43, views: 5289

11
The last sixth article, we describe how to create a digital clock, and today I want to tell you in this article to set the alarm to sound capabilities increase digital clock basis. As used herein, the HTML5 audio element to a call ringing audio.

Want to extend the effect of the digital clock alarm clock, there is a need to do, one thing is to have set the alarm bells a time that can edit interface; second, per listener whether the alarm time, if you pop into the ring time reminders and play ringing audio.
HTML
We use the articles using jQuery and CSS3 to create digital clock (jQuery part) the html structure, increasing alarm elements, increase set the alarm pop-up interface, increasing the ring to remind Interface and Audio audio elements.
        <div id="clock" class="light">
			<div class="display">
				<div class="date"></div>
                <div class="alarm"></div>
				<div class="digits"></div>
			</div>
		</div>
        
	</div>
	
	<div class="overlay" id="settime">
		<div id="alarm-dialog">
			<h2>Set a triggered time for alarm</h2>
			<label class="hours">
				Hour
				<input type="number" value="0" min="0" />
			</label>
			<label class="minutes">
				Min
				<input type="number" value="0" min="0" />
			</label>
			<label class="seconds">
				Sec
				<input type="number" value="0" min="0" />
			</label>
			<div class="button-holder">
				<a id="alarm-set" class="button blue">Set</a>
			</div>
			<a class="close"></a>
		</div>
	</div>
	
	<div class="overlay" id="timeisup">
		<div id="time-is-up">
			<h2>Time UP!</h2>
			<div class="button-holder">
				<a class="button blue">Close</a>
			</div>
		</div>
	</div>
        
    <audio id="ring" preload>
		<source src="audio/ticktac.mp3" type="audio/mpeg" />
		<source src="audio/ticktac.ogg" type="audio/ogg" />
	</audio>

jQuery
First, we use CSS to set the time and time to the two hidden pop-up layers, specific look demo in css, not detailed here. Then click on the icon next to the clock when the alarm, display a pop-layer #settime, minutes and seconds display settings form, click on "Settings" button, we want to time the digital input validation, specifically look at the following code:
var alarm_counter = -1;
	

    // let it run
    (function update_time(){

        //call moment.js to format time
        var now = moment().format("HHmmss");

        digits.h1.attr('class', digit_to_name[now[0]]);
        digits.h2.attr('class', digit_to_name[now[1]]);
        digits.m1.attr('class', digit_to_name[now[2]]);
        digits.m2.attr('class', digit_to_name[now[3]]);
        digits.s1.attr('class', digit_to_name[now[4]]);
        digits.s2.attr('class', digit_to_name[now[5]]);

		var date = moment().format("MM-DD-YYYY");
		var week = weekday[moment().format('d')];
		$(".date").html(date + ' ' + week);
		
		//alarm
		var alarm = $(".alarm");
		if(alarm_counter > 0){
			alarm_counter--;
			alarm.addClass('active');
		}
		else if(alarm_counter == 0){

			$("#timeisup").fadeIn();
			//play sound on browser supporting html audio 
			try{
				$("#ring")[0].play();
			}
			catch(e){}
			
			alarm_counter--;
			alarm.removeClass('active');
		}
		else{
			alarm.removeClass('active');
		}

        // run per sec
        setTimeout(update_time, 1000);
    })();
	
	$('.alarm').click(function(){
		$("#settime").show();
	});

	$('a.close').click(function(){
		$("#settime").hide();
	});
	
	$("#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;	
		}

		alarm_counter = after;
		$("#settime").hide();
	});
	
	$("#timeisup").click(function(){
		$("#timeisup").fadeOut();
		$("#settime").find('input').attr('value','0');
	});

Then we have to make a judgment, determine the value of the counter variable alarm_counter update_time executed per second () function, if the value alarm_counter is greater than 0, not to the ringing time, this time minus a count variable, the alarm icon style in active state; if alarm_counter exactly equal to zero, indicating that the ringing time, then pop-up "time to" remind layer, and playing audio; if alarm_counter less than 0, then the ring in non-working condition.
$(function(){ 
    ... 
    // let alarm run 
    (function update_time(){ 
        ... 
        //alarm
        var alarm = $(".alarm"); 
        if(alarm_counter > 0){ 
            alarm_counter--; 
            alarm.addClass('active'); 
        } 
        else if(alarm_counter == 0){ 
 
            $("#timeisup").fadeIn(); 
            //play sounds in browser supporting html5
            try{ 
                $("#ring")[0].play(); 
            } 
            catch(e){} 
             
            alarm_counter--; 
            alarm.removeClass('active'); 
        } 
        else{ 
            alarm.removeClass('active'); 
        } 
        // run per seconds
        setTimeout(update_time, 1000); 
    })(); 
}); 

Finishing the above code, you can see the demo in effect, please be attention that audio elements will take into effect in html5 supported browsers.

Category: Javascript / HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
23 March 2017 01:11

Alex

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
How to do it cookie ?

<
  • 0 Comments
  • 0 Articles
13 November 2017 03:24

dhokee

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I need this alarm clock badly. I will be downloading this once I have found the assignment writing tips I am looking for. Maybe this alarm clock will finally bring me some good luck.

<
  • 0 Comments
  • 0 Articles
2 December 2017 04:49

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I like to recommend exclusively fine plus efficient information and facts, hence notice it: Lemongrass Essential Oil

<
  • 0 Comments
  • 0 Articles
3 December 2017 21:07

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Why do only so much written on this subject? Here you see more. Rutabagas

<
  • 0 Comments
  • 0 Articles
4 December 2017 01:26

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I can give you the address Here you will learn how to do it correctly. Read and write something good. Essential Oil

<
  • 0 Comments
  • 0 Articles
6 December 2017 20:44

Kolkata Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Beauti Queen amazing kolkata escorts agency alwyas ready for you at your doorstep. Beauti Queen provide you high profile independent girl in kolkata, escorts service in kolkata, kolkata escorts. If you are looking for the ultimate encounter in Kolkata then I am your sophisticated young Kolkata escorts that provides upscale companionship for making your night becomes true.
escorts service in kolkata, kolkata escorts, escorts in kolkata, independent escorts in kolkata, female escorts in kolkata

<
  • 0 Comments
  • 0 Articles
9 January 2018 13:11

rolex replica watches

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
White, giving a rolex replica uk clean, simple, elegant, quiet feeling more, this Longines watch body made of rolex replica watche stainless steel, the dial is "wheat grain" decorative dial so that the sense of hierarchy, 13 diamonds patchwork of " Walking "in time orbit, Silver plated fake omega watches pointer delicate, as Longines gave it" Elegance is an attitude "generally pure. If you like simple and elegant style, then white may swiss replica watches be your better choice.

<
  • 0 Comments
  • 0 Articles
27 January 2018 04:32

Kolkata Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Renu Das Kolkata Escorts Services has gorgeous females provides Independent Escorts Service in Kolkata call girls at 100% satisfaction with VIP models. Provided Kolkata escorts at our agency are professional in nature and are eager to serve you at your place.
kolkata escorts, escorts in kolkata, escorts service in kolkata, female escorts in kolkata, escorts agency in kolkata, independent escorts in kolkata

<
  • 0 Comments
  • 0 Articles
23 February 2018 05:48

pnr status

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
PNR number is generally printed at the top left corner of the printed tickets. In case of the E – Ticket, it is mentioned at top in separate cell. pnr status

It includes columns to store booking status and current status of the ticket.
pnr status

<
  • 0 Comments
  • 0 Articles
26 February 2018 13:53

tape measure uk

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
3Pcs Body Measuring tape measure Ruler Sewing Cloth Tailor Tape Measure Soft tape measurer online Flat 60" 150cm,Tape Measure (4-Pack) Stanley Hi-Visibility 25ft 16ft & (2) 12ft STHT74201,Retractable laser tape measure OXFORD Metric/ Feet/ Inches 10'/16'/ 25' Measuring Tape Measure laser measure uk Tool.

<
  • 0 Comments
  • 0 Articles
26 February 2018 23:57

Delhi Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Riya Chaudhary is an Independent Delhi Escort girl, who offers dazzling hot Delhi Escorts Service, incall or outcall services both to complete your dreams in real entertainment. We offers high class Independent Escorts in Delhi at Riya Chaudhary Delhi Escorts service agency for elite peoples in the city to avail ultimate satisfaction. you can spend your beautiful moments.
delhi escorts, independent escorts in delhi, escorts in delhi

Information
Comment on the news site is possible only within (days) days from the date of publication.