Membuat jam digital berdasarkan jQuery dan CSS3 dengan muat turun kod sumber (jquery)_jquery

Tanpa berlengah lagi, izinkan saya tunjukkan rendering dahulu Jika anda berminat, sila teruskan membaca

Lihat demo Muat turun kod sumber

HTML

Struktur HTML yang sama seperti artikel sebelumnya: Menggunakan jQuery dan CSS3 untuk mencipta jam digital (artikel CSS3) , kecuali terdapat >tarikh tambahan untuk memaparkan tarikh dan hari dalam seminggu .

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

jQuery

Sila rujuk artikel sebelumnya untuk kod CSS artikel ini tidak akan panjang lebar dan lihat sahaja kod jQuery.

Mula-mula kami mentakrifkan parameter, mentakrifkan tatasusunan nama kelas yang digunakan untuk memanggil nombor, mentakrifkan nama Cina minggu ini dan mentakrifkan kedudukan jam, minit dan saat.

$(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' 
 ]; 
}); 

Kemudian bina jam, minit dan saat jam digital. Dalam artikel sebelumnya, kami meletakkan struktur html jam digital secara langsung dalam html, dan kini kami menggunakan jQuery untuk mengendalikan paparan jam dan membina jam digital melalui kaedah append().

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); 
  } 
 }); 

Akhir sekali, kita perlu membuat jam berjalan. Fungsi update_time() dipanggil sekali setiap saat Dalam update_time(), kami mula-mula menggunakan moment.js untuk memformat masa Untuk pengenalan kepada moment.js, sila rujuk artikel di tapak ini: Gunakan moment.js dengan mudah menguruskan tarikh dan masa. Kemudian mengikut jam, minit dan saat semasa, tetapkan atribut kelas nombor jam, minit dan saat masing-masing, iaitu, paparkan nombor jam, minit dan saat semasa. Kemudian teruskan menggunakan moment.js untuk memformat tarikh dan hari dalam seminggu, dan akhirnya melengkapkan jam digital bergerak Sila lihat kod di bawah:

$(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); 
 })(); 
});