Membuat Jam Digital Cantik Dengan jQuery

Membuat Jam Digital Cantik Dengan jQuery - Halo semua, tutorial ini saya ingin menciptakan sebuah jam digital sederhana dengan tanggal dan waktu, dengan bantuan script jQuery dan CSS3 untuk sedikit animasi, tidak ada yang cukup keras untuk memahami berbagai metode dan menggunakan kreativitas Anda dalam yang terbaik cara. Ini hanya awal!



HTML

Markup adalah benar-benar sederhana dan fleksibel dan menyesuaikan dengan skenario yang mungkin banyak mungkin Anda alami. Buat div "jam", buah sebuah div id "Tanggal" akan berisi data kami, akhirnya menetapkan daftar unordered yang akan berisi jam, menit dan detik.

<div class="clock">
<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
</ul>
</div>

CSS

Styling ini sangat sederhana, Anda dapat menciptakan sesuatu dengan kreativitas Anda, ini hanya setting default untuk aplikasi masa depan Anda.

/* If you want you can use font-face */
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

.container {width: 960px; margin: 0 auto; overflow: hidden;}

.clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; }

#Date { font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; }

ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; }
ul li { display:inline; font-size:10em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }

#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; }

/* Simple Animation */
@-webkit-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

@-moz-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

jQuery

Langkah pertama adalah untuk memanggil file jQuery.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Langkah kedua masukan code script di bawah ini

<script type="text/javascript">
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = ["January",];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

setInterval( function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);

setInterval( function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);

setInterval( function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
});
</script>

Logika :

new Date()
Ini menciptakan objek Date baru dengan nilai tanggal dan waktu pada PC browser.
setDate() and getDate()
Para setDate () metode menentukan hari bulan (dari 1 sampai 31), menurut waktu setempat, sedangkan getdate () metode mengembalikan hari bulan (dari 1 sampai 31) untuk tanggal yang ditentukan, sesuai dengan waktu setempat .
getSeconds (), getMinutes () dan getHours ()
Metode ini memungkinkan untuk mengekstrak detik, menit dan jam waktu saat ini pada PC browser.
(seconds <10 "0": "") + seconds)

Menambahkan nol ke nilai detik, yang sama berlaku untuk menit dan jam. Itu? dan: simbol yang digunakan terdiri atas operator ternary. Ini adalah operator khusus yang mengembalikan nilai sebelum usus besar jika kondisi sebelum query (?) Benar, atau nilai setelah titik dua jika kondisi adalah palsu.
setInterval fungsi
setInterval adalah fungsi JavaScript standar, bukan bagian dari jQuery. Anda menyebutnya dengan fungsi untuk mengeksekusi dan waktu dalam milidetik.

[Last edited Mar 18, 2012]