WEB技术分享

想要在数字时钟时钟上扩展闹钟效果，需要做的有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的浏览器才会有效果。