如何使用jQuery和CSS3制作数字时钟

文章目录

标记

时钟不需要很多HTML。这是因为它的很大一部分(例如工作日的名称和数字的代码)是动态生成的。这是使用时钟需要在页面上具有的标记:

index.html

<div id = “ clock”  class = “ light” >
     < div  class = “ display” > 
        < div  class = “工作日” > </ div > 
        < div  class = “ ampm” > </ div > 
        < div  class = “警报” > </ div > 
        < div  class = “ digits” > </ div >
    </ div > 
< / div>

主要元素#clock div包含.display,该显示又包含工作日列表,AM / PM标签警报图标和时间。这是数字之一的生成标记:

<div class = “零” >
     < span  class = “ d1” > </ span > 
    <span class = “ d2” > </ span > 
    <span class = “ d3” > </ span > 
    <span class = “ d4 “ > </ span > 
    <span class = ” d5“ > </ span > 
    <span class = “ d6” ></ span > 
    <span class = “ d7” > </ span > 
< / div>

.digits元素将包含这些带有跨度的div中的6个,每个时间位数对应一个。从上面的片段中可以看到,这些div的类名从(一秒钟会更多),并且包含七个具有唯一类的span元素。这些跨度是数字段,就像旧的数字时钟一样:

它们完全使用CSS设置样式,并且opacity:0默认设置为。分配给其父div的类使它们可见。这是零的CSS:

资产/css/styles.css

/ * 0 * / 

#clock  .digits  div .zero  .d1#clock  .digits  div .zero  .d3#  clock .digits  div .zero  .d4#  clock .digits  div .zero  .d5#  clock .digits  div .zero  .d6#clock  .digits  div .zero  .d7 {
    不透明度1 ; 
}

除中间部分外,其他所有部分均可见(否则为8)。我为所有这些跨度添加了CSS3过渡属性,该属性可在数字之间切换时为不透明度设置动画。

样式表中还有很多其他CSS,但在此不再赘述。我认为,了解CSS如何工作的最好方法是通过检查Firebug,Chrome的Inspector或所选浏览器的开发人员工具中的演示程序的实时代码。

jQuery代码

为了使时钟正常工作,我们将不得不使用jQuery为每个数字生成标记,并设置一个计时器以每秒更新一次类。为了使我们的生活更轻松,我们将使用moment.js库(快速技巧)来弥补缺少的JavaScript本机日期和时间函数。

资产/js/script.js

$(函数() { //缓存一些选择器var clock = $('#clock'),
        alarm = clock.find('.alarm'),
        ampm = clock.find('.ampm'); //将数字映射到它们的名称(这将是一个数组)var digit_to_name = '零一二三四有五六七八有八' .split(''); //此对象将包含数字元素var digits = {}; //时,分和秒的位置var position = [
         'h1''h2'':''
    'm2'':''s1''s2' 
    ]; //生成具有所需标记的数字,//并将它们添加到时钟中var digit_holder = clock.find('.digits'); 
    $ .each(位置,函数

 { ifthis == ':'){ 
            digit_holder.append('<div class =“ dots”>'); 
        } else { var pos = $('<div>'); 对于var i = 1 ; i < 8 ; i ++){ 
                pos.append('<span class =“ d' + i + '”>'); 
            } //将数字设置为key:value对象对中的值对
            digits [ this ] = pos; //将数字元素添加到页面
        
            digit_holder.append(pos); 
        } 

    }); //添加工作日名称VAR weekday_names = '星期一星期二星期三星期四星期五星期六星期日' .split('' ),
        weekday_holder = clock.find(” .weekdays'); 
    $ .each(weekday_names,function  
 { 
        weekday_holder.append('<span>' + this + '</ span>'); 
    }); var weekdays = clock.find('.weekdays span'); //每秒运行一个计时器并更新时钟函数update_time
 { //使用moment.js以字符串形式输出当前时间// hh是12小时格式的小时,// mm-分钟,ss-seconds(均带有前导零),// d表示星期几,A代表AM / PM var now = moment()。format(“ hhmmssdA”); 
        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 dow = now [ 6 ]; 
        陶氏-; // 星期日!if(dow < 0){
             //使它最后一次
            dow = 6 ; 
        } //标记一周中
        工作日(daydays.removeClass('active'
        ).eq(dow).addClass('active'); //设置am / pm文本: 
        ampm.text(now [ 7 ] + now [ 8 ]); //安排此函数在1秒钟内再次运行
        setTimeout(update_time,1000); 
    })(); //切换主题
    $('a.button'.click函数
 { 
        clock.toggleClass('light dark'); 
    }); 

});

这里最重要的代码是update_time函数。在其中,我们以字符串形式获取当前时间,并用它来填充时钟的元素并为数字设置正确的类。

©️李联华的博客网 当前IP地址:3.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/how-to-make-a-digital-clock-using-jquery-and-css3.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...