Buat jam digital jQuery anda sendiri

Tutorial ini menunjukkan kaedah yang mudah namun berkesan untuk memaparkan jam digital di laman web anda menggunakan jQuery. Jam secara dinamik mengemas kini setiap saat, memberikan paparan masa yang berterusan.

inilah kod jQuery:

function updateClock() {
    var currentTime = new Date();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();

    currentMinutes = (currentMinutes  12) ? currentHours - 12 : currentHours;
    currentHours = (currentHours === 0) ? 12 : currentHours;

    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

    $("#clock").html(currentTimeString);
}

$(document).ready(function() {
    setInterval(updateClock, 1000);
});

Coretan kod ini mengambil masa semasa, formatnya dengan sewajarnya (termasuk penamaan AM/PM), dan mengemas kini elemen HTML dengan "jam" id setiap saat.

Soalan Lazim dan Pilihan Penyesuaian:

Bahagian ini menangani soalan biasa dan menyediakan penyelesaian untuk menyesuaikan jam digital jQuery anda.

Penyesuaian Penampilan (CSS):

Anda boleh menyesuaikan penampilan jam dengan mudah menggunakan CSS. Sebagai contoh, untuk menukar warna menjadi biru dan saiz fon hingga 24 piksel:

#clock {
  color: blue;
  font-size: 24px;
}

Menambah tarikh:

Untuk memasukkan tarikh, gunakan JavaScript berikut dalam fungsi

anda: updateClock

var currentDate = currentTime.toDateString();
$("#date").html(currentDate);

ingat untuk menambah elemen

ke html anda. <div id="date"></div>

12 jam vs format 24 jam: Kod yang disediakan telah mengendalikan format 12 jam. Untuk format 24 jam, keluarkan pembolehubah dan laraskan logik timeOfDay dengan sewajarnya. currentHours

Menambah bunyi, zon waktu, dan ciri -ciri yang lebih canggih: Menambah bunyi (menggunakan elemen html5 ), zon waktu pengendalian (memerlukan perpustakaan luaran seperti zon waktu momen), atau membuat jam yang lebih kompleks Soalan Lazim yang disediakan menawarkan titik permulaan untuk ciri -ciri yang lebih maju ini. Ingatlah untuk mempertimbangkan implikasi prestasi apabila menambah fungsi yang luas. <audio></audio>

Atas ialah kandungan terperinci Buat jam digital jQuery anda sendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!