注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery向漂亮的数字时钟添加闹钟功能

动画 fishcity 1391浏览

上一篇我们创建了一个用jQuery和CSS3制作的数字时钟 ,在本次更新中,我们将使用HTML5的audio元素来添加对闹铃设置的支持。

jquery实例:思路

为了扩展数字时钟对闹铃的支持,我们需要在上周的代码中添加一些关键的部分方法:

  • 我们需要一种方法来让人们设置和调整闹铃,这将需要一些带设置闹铃时间设置区域之类的对话框;

  • 每一秒,我们需要检查闹铃是否应该响铃,如果是,我们就播放一小段音频文件并且提示“时间到”的对话框。

这些特性要修改HTML,CSS和jQuery,让我们开始!

jquery闹钟功能

HTML

我们有两个对话框 – 一个是用来设置/编辑闹铃的,而另一个是来显示闹铃时间已到的。

index.html

<div class="overlay">
 
    <div id="alarm-dialog">
 
        <h2>Set alarm after</h2>
 
        <label class="hours">
            Hours
            <input type="number" value="0" min="0" />
        </label>
 
        <label class="minutes">
            Minutes
            <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">Set</a>
            <a id="alarm-clear" class="button red">Clear</a>
        </div>
 
        <a class="close"></a>
 
    </div>
 
</div>
 
<div class="overlay">
 
    <div id="time-is-up">
 
        <h2>Time's up!</h2>
 
        <div class="button-holder">
            <a class="button blue">Close</a>
        </div>
 
    </div>
 
</div>

这两个对话框都是用CSS隐藏的,当需要显示时用jQuery的fadeIn()方法来显示。另一个值得指出的是闹铃对话框使用HTML5的带 min 值为0的 number 输入框,数字输入框是非常容易用JavaScript来验证的并且在移动设置上也会调出数字键盘。

接下来是HTML5的 audio 元素,它带有两个不同的音频格式,第一个是mp3版本的警报声音,第二个是ogg格式,ogg格式仅在因许可证问题而还不支持mp3播放的Firefox下才需要。还好几乎所有其他支持HTML5音频的浏览器也支持mp3。

index.html

<audio id="alarm-ring" preload>
    <source src="assets/audio/ticktac.mp3" type="audio/mpeg" />
    <source src="assets/audio/ticktac.ogg" type="audio/ogg" />
</audio>

preload 属性告知浏览器这些声音文件是需要提前下载的,一旦我们决定播放它们时需要它们立即生效(否则在一个警报声音首次播放时会有延时直到它们下载下来)。播放声音文件极为简单,这要感谢JavaScript的HTML5 audio API (下一节中会有更多介绍)。

jQuery

在教程的本章节,我们将扩展数字时钟的jQuery代码来支持和播放闹铃。我不对上次所写代码进行解释,只说新添加部分。

我们要做的第一件事就是定义一个对闹铃方法很重要数字变量:

assets/js/script.js

var dialog = $('#alarm-dialog').parent(),
    alarm_set = $('#alarm-set'),
    alarm_clear = $('#alarm-clear'),
    time_is_up = $('#time-is-up').parent();
 
// This will hold the number of seconds left
// until the alarm should go off
var alarm_counter = -1;

接下来,我们要在update_time()方法中检查每秒是否存在未处理的闹铃。

// Is there an alarm set?
 
if(alarm_counter > 0){
 
    // Decrement the counter with one second
    alarm_counter--;
 
    // Activate the alarm icon
    alarm.addClass('active');
}
else if(alarm_counter == 0){
 
    time_is_up.fadeIn();
 
    // Play the alarm sound. This will fail
    // in browsers which don't support HTML5 audio
 
    try{
        $('#alarm-ring')[0].play();
    }
    catch(e){}
 
    alarm_counter--;
    alarm.removeClass('active');
}
else{
    // The alarm has been cleared
    alarm.removeClass('active');
}

当计数器到达0时,这意味着我们将播放闹铃声音并显示“时间到”的对话框。我用jQuery选择了 #alarm-ring声音元素,并访问集合中的第一个DOM元素以用于调用在声音元素上可用的JavaScript的 play()方法

最后剩下要做的,是要处理“设置闹铃”的对话框和不同的的按钮:

// Handle setting and clearing alamrs
 
$('.alarm-button').click(function(){
 
    // Show the dialog
    dialog.trigger('show');
 
});
 
dialog.find('.close').click(function(){
    dialog.trigger('hide')
});
 
dialog.click(function(e){
 
    // When the overlay is clicked, 
    // hide the dialog.
 
    if($(e.target).is('.overlay')){
        // This check is need to prevent
        // bubbled up events from hiding the dialog
        dialog.trigger('hide');
    }
});
 
alarm_set.click(function(){
 
    var valid = true, after = 0,
        to_seconds = [3600, 60, 1];
 
    dialog.find('input').each(function(i){
 
        // Using the validity property in HTML5-enabled browsers:
 
        if(this.validity && !this.validity.valid){
 
            // The input field contains something other than a digit,
            // or a number less than the min value
 
            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 choose a time in the future!');
        return; 
    }
 
    alarm_counter = after;
    dialog.trigger('hide');
});
 
alarm_clear.click(function(){
    alarm_counter = -1;
 
    dialog.trigger('hide');
});
 
// Custom events to keep the code clean
dialog.on('hide',function(){
 
    dialog.fadeOut();
 
}).on('show',function(){
 
    // Calculate how much time is left for the alarm to go off.
 
    var hours = 0, minutes = 0, seconds = 0, tmp = 0;
 
    if(alarm_counter > 0){
 
        // There is an alarm set, calculate the remaining time
 
        tmp = alarm_counter;
 
        hours = Math.floor(tmp/3600);
        tmp = tmp%3600;
 
        minutes = Math.floor(tmp/60);
        tmp = tmp%60;
 
        seconds = tmp;
    }
 
    // Update the input fields
    dialog.find('input').eq(0).val(hours).end().eq(1).val(minutes).end().eq(2).val(seconds);
 
    dialog.fadeIn();
 
});
 
time_is_up.click(function(){
    time_is_up.fadeOut();
});

关于上面代码有点有意思的地方,注意我在35行是怎么使用内置 validity (在流行浏览器的一个为数字输入框存在)属性的。 它告诉我们是否输入域的内容是一个比0大的数字(记住它们的最小值为0)。

另外一件值得指出的事是闹铃对话框的代码是用自定义事件组织的,当 show 事件触发时,我们计算闹铃的剩余小时,分和秒,并填充到输入框中。

至此我们带闹种的漂亮的数字时钟就完成了! 我希望你喜欢这个快速教程并方便的用于你自己的项目。

转载请注明:jQ酷 » jquery向漂亮的数字时钟添加闹钟功能

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。