jQuery CSS3数字时钟

 查看演示  website  立即下载

我们将用jQuery和CSS3 创建了一个数字时钟。并添加支持使用HTML5的音频元素设置警报。

我们的想法

为了扩大数字时钟报警的支持，我们需要添加一些关键的部分功能从上周的代码：

我们需要有一种方式为人们建立和编辑报警。这将要求某种形式的对话框，用于设置闹钟时间的字段;

每一秒，我们需要检查是否应该去报警。，如果有的话，我们会玩一个小的音频文件，并显示“时间”对话框。

这些功能将需要修改的HTML，CSS和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的淡入（）方法时，他们需要显示。另外一点值得注意的是，“警报”对话框中使用HTML5的一分钟值0的号码输入类型。数字输入是非常容易使用JavaScript（在下一节）来验证，同时也带来了在移动设备上的数字键盘。

接下来是HTML5的音频元素。它包含了两个不同的音频格式的源标签。第一个是mp3文件的版本的报警声，并且第二格。ogg格式只需要在Firefox中，还不支持MP3播放由于许可证的问题。几乎所有其他浏览器也支持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>

预紧属性告诉浏览器，这些声音文件应该下载的时间提前，这将使他们立即可用，一旦我们决定发挥他们（否则就不会有一个延迟在第一时间报警，直到它们被下载播放）。播放音频文件是非常简单的JavaScript的HTML5音频API（更多的是在接下来的片段）。

The 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 选择报警环音频元素，我访问的第一个集合内的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行，这是存在的数量在现代浏览器中的输入类型。它告诉我们的输入字段的内容是否是一个数字大于0（记得他们有一个最低值0）。

另一个值得注意的是另一件事的报警对话框的代码组织方式与自定义事件。当显示事件被触发时，计算剩余的小时，分钟和秒的警报，然后将其插入到输入信息。

我们有了这个漂亮的数字时钟，报警好了！我希望你喜欢这个快速教程，会发现它在自己的项目得心应手。

PREVIOUS:
NEXT:
树形插件
jquery右键菜单