Making a digital clock based on jQuery and CSS3 with source code download (jquery)_jquery

Without further ado, let me show you the renderings first. If you are interested, please continue reading

View the demo Source code download

HTML

The same HTML structure as the previous article: Using jQuery and CSS3 to create a digital clock (CSS3 article) , except that there is an extra >date to display the date and day of the week.

<div id="clock" class="light"> 
 <div class="display"> 
  <div class="date"></div> 
  <div class="digits"></div> 
 </div> 
</div> 

jQuery

Please refer to the previous article for the CSS code. This article will not be long-winded and just look at the jQuery code.

First we define the parameters, define the class name array used to call numbers, define the Chinese name of the week, and define the position of hours, minutes and seconds.

$(function(){ 
 var clock = $('#clock'); 
 //定义数字数组0-9 
 var digit_to_name = ['zero','one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; 
 //定义星期 
 var weekday = ['周日','周一','周二','周三','周四','周五','周六']; 
 var digits = {}; 
 //定义时分秒位置 
 var positions = [ 
  'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' 
 ]; 
}); 

Then build the hours, minutes and seconds of a digital clock. In the previous article, we placed the html structure of the digital clock directly in html, and now we use jQuery to handle the display of the clock and build the digital clock through the append() method.

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 + '">'); 
   } 
   digits[this] = pos; 
   digit_holder.append(pos); 
  } 
 }); 

Finally, we have to make the clock run. The update_time() function is called once every second. In update_time(), we first use moment.js to format the time. For an introduction to moment.js, please refer to the article on this site: Use moment.js to easily manage dates and times. Then according to the current hour, minute and second, set the class attributes of the hour, minute and second numbers respectively, that is, display the current hour, minute and second numbers. Then continue to use moment.js to format the date and day of the week, and finally complete the moving digital clock. Please see the code below:

$(function(){ 
 ... 
 (function update_time(){ 
  //调用moment.js来格式化时间 
  var now = moment().format("HHmmss"); 
  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 date = moment().format("YYYY年MM月DD日"); 
  var week = weekday[moment().format('d')]; 
  $(".date").html(date + ' ' + week); 
  // 每秒钟运行一次 
  setTimeout(update_time, 1000); 
 })(); 
});