Membuat Jam Digital dengan CSS3

Transkripsi

1

2 Membuat Jam Digital dengan CSS3 Oleh: Sendy PK Jam merupakan penanda waktu yang penting saat kita mengunjungi website. Pada Tutorial kali ini kita akan membuat Jam Digital pada website kita menggunakan jquery dan CSS3 HTML <div id="clock" class="light"> <div class="display"> <div class="weekdays"></div>... Jam merupakan penanda waktu yang penting saat kita mengunjungi website. Pada Tutorial kali ini kita akan membuat Jam Digital pada website kita menggunakan jquery dan CSS3 HTML <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> Elemen utama #clock div, berisi tampilan yang menunjukan waktu dalam sehari, label AM/PM, dan berikut markup untuk digit dalam jam <div class="zero"> <span class="d1"></span> <span class="d2"></span>

3 <span class="d3"></span> <span class="d4"></span> <span class="d5"></span> <span class="d6"></span> <span class="d7"></span> </div> Secara default style ditetapkan dengan opacity: 0. Kelas ditugaskan untuk div parent yang membuat mereka dapat terlihat. Berikut adalah CSSnya: assets/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{ opacity:1; Semua segmen terlihat, kecuali satu yang di tengah. Kita telah tambahkan transisi properti CSS3 pada semua span tersebut, yang menganimasikan opacity bila beralih di antara angka.

4 JQuery Untuk membuat jam berfungsi, kita akan menggunakan jquery untuk menghasilkan markup untuk masing-masing digit, dan mengatur timer untuk memperbarui kelas setiap detik. Untuk membuatnya hidup lebih mudah, kami akan menggunakan library moment.js untuk mengkompensasi kekurangan JavaScript native tanggal dan fungsi waktu. assets/js/script.js $(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' ];

5 // 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]]);

6 )(); 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'); ); ); Bagian paling penting dari kode di sini adalah fungsi UPDATE_TIME. Di dalamnya, kita dapat waktu saat ini sebagai string, dan menggunakannya untuk mengisi elemen jam dan untuk mengatur kelas yang benar untuk angka. Dan Jam Digital sudah siap untuk digunakkan pada website kita, silahkan mencoba.

7 Tentang Penulis Sendy PK Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di dan Online Shop saya di