使用jQuery和CSS3实现一个数字时钟
点击进入更详细教程及源码下载 在线演示
代码:
<div id="clock" class="light"> <div class="display"> <div class="weekdays"></div> <div class="ampm"></div> <div class="alarm"></div> <div class="digits"></div> </div></div><div class="zero"> <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>
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{ opacity:1;}
jquery code
$(function(){ // Cache some selectors var clock = $('#clock'), alarm = clock.find('.alarm'), ampm = clock.find('.ampm'); // Map digits to their names (this will be an array) var digit_to_name = 'zero one two three four five six seven eight nine'.split(' '); // This object will hold the digit elements var digits = {}; // Positions for the hours, minutes, and seconds var positions = [ 'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' ]; // Generate the digits with the needed markup, // and add them to the clock var digit_holder = clock.find('.digits'); $.each(positions, function(){ if(this == ':'){ digit_holder.append('<div class="dots">'); } else{ var pos = $('<div>'); for(var i=1; i<8; i++){ pos.append('<span class="d' + i + '">'); } // Set the digits as key:value pairs in the digits object digits[this] = pos; // Add the digit elements to the page digit_holder.append(pos); } }); // Add the weekday names var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '), weekday_holder = clock.find('.weekdays'); $.each(weekday_names, function(){ weekday_holder.append('<span>' + this + '</span>'); }); var weekdays = clock.find('.weekdays span'); // Run a timer every second and update the clock (function update_time(){ // Use moment.js to output the current time as a string // hh is for the hours in 12-hour format, // mm - minutes, ss-seconds (all with leading zeroes), // d is for day of week and A is for 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]]); // The library returns Sunday as the first day of the week. // Stupid, I know. Lets shift all the days one position down, // and make Sunday last var dow = now[6]; dow--; // Sunday! if(dow < 0){ // Make it last dow = 6; } // Mark the active day of the week weekdays.removeClass('active').eq(dow).addClass('active'); // Set the am/pm text: ampm.text(now[7]+now[8]); // Schedule this function to be run again in 1 sec setTimeout(update_time, 1000); })(); // Switch the theme $('a.button').click(function(){ clock.toggleClass('light dark'); }); });
【使用jQuery和CSS3实现一个数字时钟】相关文章
3. jQuery+CSS3实现数字时钟Digital Clock
4. jQuery+CSS3实现数字时钟Digital Clock
本文来源:https://www.51html5.com/a1211.html
﹝使用jQuery和CSS3实现一个数字时钟﹞相关内容
- Cufon, jQuery和CSS3实现的超强飞出菜单
- Cufon, jQuery和CSS3实现的超强飞出菜单
- 一款jquery和css3实现的卡通人物动画特效
- 一款jquery和css3实现的卡通人物动画特效
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- 利用Jquery和CSS3 技术制作一副幻灯片
- CSS3+jQuery的一个丰富多彩时钟
- CSS3+jQuery的一个丰富多彩时钟
- 8个基于jQuery和HTML5的日历时钟插件