Cara menggunakan JavaScript untuk melaksanakan operasi pelapik jam

Apabila menulis jam JavaScript, kita selalunya perlu memaparkan maklumat masa seperti jam, minit, saat, dsb. Walau bagaimanapun, oleh kerana nilai jam, minit dan saat biasanya kurang daripada dua digit, operasi pelapik diperlukan supaya jam boleh dipaparkan secara normal. Artikel ini akan memperkenalkan kaedah dan teknik tentang cara menggunakan JavaScript untuk melaksanakan operasi pengisian jam.

Pengetahuan asas jam JavaScript

Sebelum kita mula membincangkan operasi pengisian jam, kita perlu terlebih dahulu memahami cara mencipta jam asas menggunakan JavaScript. Berikut ialah program contoh jam JavaScript yang mudah:

function updateClock() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  document.getElementById("clock").innerHTML = hour + ":" + minute + ":" + second;
}
setInterval(updateClock, 1000);

Dalam kod di atas, kami mula-mula mencipta fungsi updateClock, yang memperoleh masa semasa melalui fungsi new Date() dan mengeluarkan jam masing-masing. , nilai minit dan saat. Kemudian, kami menggunakan fungsi document.getElementById() untuk mendapatkan elemen jam dalam halaman HTML dan menetapkan kandungannya kepada masa semasa. Akhir sekali, kami menggunakan fungsi setInterval() untuk memanggil fungsi updateClock setiap 1 saat untuk mencapai kemas kini masa nyata jam.

Kaedah dan teknik pengisian jam

Dalam kod di atas, kita dapat melihat bahawa jika nilai jam, minit atau saat masa semasa kurang daripada dua digit, akan ada penampilan yang tidak sedap dipandang. kesan paparan. Contohnya, apabila nombor minit ialah 9, jam memaparkan "10:9:35" dan bukannya "10:09:35". Untuk menyelesaikan masalah ini, kita perlu melakukan operasi pelapik jam. Berikut ialah dua kaedah dan teknik padding biasa:

1. Menggunakan padding string

function zeroPadding(num, length) {
  return ('0' + num).slice(-length);
}

Dalam kod di atas, kami mentakrifkan fail yang dipanggil fungsi zeroPadding, ini fungsi menerima dua parameter: num mewakili nilai yang akan diisi dan length mewakili bilangan digit selepas diisi. Di dalam fungsi, kita mula-mula menukar nilai berangka kepada rentetan, kemudian tambah 0 di hadapan dan gunakan fungsi slice() untuk mendapatkan rentetan dengan bilangan digit yang ditentukan. Sebagai contoh, apabila kita perlu memasukkan minit kepada dua digit, memanggil zeroPadding(9, 2) akan mengembalikan rentetan "09"; apabila kita perlu memasukkan detik kepada tiga digit, memanggil zeroPadding(35, 3) akan mengembalikan Rentetan aksara "035".

2. Gunakan pemformatan nombor

function formatNumber(num, length) {
  return num.toLocaleString(undefined, {minimumIntegerDigits: length});
}

Dalam kod di atas, kami mentakrifkan fungsi bernama formatNumber, yang menerima dua parameter: num mewakili nilai kepada diisi, dan length mewakili bilangan digit selepas diisi. Di dalam fungsi, kami menggunakan fungsi toLocaleString() baharu dalam ECMAScript 6 untuk memformat nilai menjadi rentetan dengan bilangan digit yang ditentukan. Pilihan minimumIntegerDigits menentukan bilangan minimum digit integer.

Berikut ialah contoh kod yang menggunakan kaedah dan teknik padding di atas untuk menambah baik program jam JavaScript di atas:

function updateClock() {
  var now = new Date();
  var hour = zeroPadding(now.getHours(), 2);
  var minute = zeroPadding(now.getMinutes(), 2);
  var second = zeroPadding(now.getSeconds(), 2);
  var timeStr = hour + ":" + minute + ":" + second;
  document.getElementById("clock").innerHTML = timeStr;
}
setInterval(updateClock, 1000);

Perlu diingat bahawa dalam kod di atas kami menggunakan zeroPadding Fungsi melakukan operasi isian. Jika anda lebih suka menggunakan fungsi formatNumber, cuma gantikan baris yang mengandungi zeroPadding dalam kod di atas dengan yang berikut:

var hour = formatNumber(now.getHours(), 2);
var minute = formatNumber(now.getMinutes(), 2);
var second = formatNumber(now.getSeconds(), 2);

Ringkasan

Semasa menulis jam JavaScript Jam operasi isian adalah kemahiran asas. Artikel ini memperkenalkan anda kepada dua kaedah dan teknik pelapik biasa: pelapik rentetan dan pemformatan nombor. Tidak kira kaedah yang anda gunakan, operasi pengisian jam boleh dilaksanakan dengan mudah, menjadikan program jam JavaScript anda lebih cantik dan praktikal.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk melaksanakan operasi pelapik jam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!