HTML5数字时钟之闹钟

jerry HTML 2015年08月20日收藏

上一篇文章中，我们介绍了如何制作一个数字时钟，今天我要在本文中给大家介绍在数字时钟基础上增加设置闹钟响铃功能。本文中使用了HTML5的audio元素来调用响铃音频。

想要在数字时钟时钟上扩展闹钟效果，需要做的有1、要有一个可以编辑设置闹钟响铃时间的界面；2、每秒钟侦听是否到了响铃时间，如果到了响铃时间则弹出提醒并播放响铃音频。

HTML

我们使用上篇文章使用jQuery和CSS3制作数字时钟(jQuery篇)的html结构，增加闹铃元素，增加设置闹铃的弹出界面，增加响铃提醒界面和audio音频元素。


	<div id="clock" class="light">
		<div class="display">
			<div class="date"></div>
            <div class="alarm"></div>
			<div class="digits"></div>
		</div>
	</div>
	
	<!--设置闹铃时间弹出层-->
	<div class="overlay" id="settime">
		<div id="alarm-dialog">
			<h2>设置闹钟触发时长</h2>
			<label class="hours">
				时
				<input type="number" value="0" min="0" />
			</label>
			<label class="minutes">
				分
				<input type="number" value="0" min="0" />
			</label>
			<label class="seconds">
				秒
				<input type="number" value="0" min="0" />
			</label>
			<div class="button-holder">
				<a id="alarm-set" class="button blue">设置</a>
			</div>
			<a class="close"></a>
		</div>
	</div>
    <!--时间到提醒弹出层-->
    <div class="overlay" id="timeisup">
		<div id="time-is-up">
			<h2>时间到!</h2>
			<div class="button-holder">
				<a class="button blue">关闭</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

首先，我们利用CSS将设置时间和时间到的两个弹出层隐藏，具体请看demo中的css，这里不详述。然后当点击时钟旁边的闹铃图标时，显示弹出层#settime，显示时分秒设置表单，在点击“设置”按钮时，我们要对输入的时间数字进行验证，具体请看下面的代码：


$(function(){
	定义初始计数变量
	var alarm_counter = -1;
	//调用设置时间界面
	$('.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('请输入有效数字!');
			return;
		}

		if(after < 1){
			alert('请输入有效的时间!');
			return;	
		}
		//设置计数变量值
		alarm_counter = after;
		$("#settime").hide();
	});
	
	$("#timeisup").click(function(){
		$("#timeisup").fadeOut();
		$("#settime").find('input').attr('value','0');
	});
});

然后我们要在每秒执行update_time()函数中做判断，判断计数变量alarm_counter的值，如果alarm_counter的值大于0，说明还没到响铃时间，这个时候计数变量减1，闹铃图标样式处于active状态；如果alarm_counter刚好等于0，说明到了响铃时间，这时弹出“时间到”提醒层，并播放音频；如果alarm_counter小于0，则说明响铃处于未工作状态。


$(function(){
	...
	// 让时钟跑起来
    (function update_time(){
		...
		//闹钟
		var alarm = $(".alarm");
		if(alarm_counter > 0){
			alarm_counter--;
			alarm.addClass('active');
		}
		else if(alarm_counter == 0){

			$("#timeisup").fadeIn();
			//在支持html audio的浏览器上播放声音
			try{
				$("#ring")[0].play();
			}
			catch(e){}
			
			alarm_counter--;
			alarm.removeClass('active');
		}
		else{
			alarm.removeClass('active');
		}
		// 每秒钟运行一次
        setTimeout(update_time, 1000);
    })();
});

将以上代码好好整理，就可以看到demo中的效果，你也可以直接下载DEMO中的源码来学习，注意音频audio元素需要支持html5的浏览器才会有效果。