Bina pemasa undur hanya dalam 18 baris JavaScript

Membina Jam Countdown JavaScript kadang -kadang perlu, sama ada acara, promosi atau permainan. Anda boleh membina jam menggunakan JavaScript asli tanpa bergantung pada mana -mana plugin. Walaupun terdapat banyak plugin jam yang sangat baik, menggunakan JavaScript asli mempunyai kelebihan berikut:

Kod ringan, kebergantungan sifar.
Laman web melakukan lebih baik tanpa memuat skrip luaran dan stylesheets.
Dengan lebih banyak kawalan, anda boleh mengawal tingkah laku jam tanpa cuba membengkokkan pemalam untuk memenuhi keperluan anda.

inilah cara membuat jam undur anda sendiri dengan hanya 18 baris kod JavaScript:

Untuk mendapatkan pemahaman yang mendalam tentang JavaScript, sila baca buku kami "JavaScript: Novice to Ninja, edisi ke-2".

mata utama

Anda boleh membina jam undur yang ringan dan cekap menggunakan JavaScript tanpa sebarang kebergantungan, memberikan prestasi dan kawalan yang lebih baik tanpa memuat skrip luaran dan stylesheets.
Proses ini termasuk menetapkan tarikh akhir yang sah, mengira masa yang tinggal, menukar masa ke dalam format yang tersedia, mengeluarkan data jam sebagai objek yang boleh diguna semula, dan memaparkan jam pada halaman dan menghentikannya apabila sifar dicapai.
Anda boleh mengoptimumkan paparan jam dengan mengeluarkan kelewatan awal, mengemas kini nombor dalam jam untuk meningkatkan kecekapan skrip, dan menambah sifar terkemuka seperti yang diperlukan.
Untuk beberapa kes penggunaan, jam boleh dilanjutkan, seperti secara automatik menjadualkan jam, menetapkan pemasa untuk masa tertentu apabila pengguna tiba, dan mengekalkan kemajuan jam di seluruh halaman dengan menjimatkan waktu akhir jam dalam kuki.
Satu amaran penting untuk diingat: Tarikh dan masa JavaScript diambil dari komputer pengguna, yang bermaksud bahawa pengguna boleh menjejaskan jam JavaScript dengan mengubah masa di komputer mereka. Dalam situasi yang sangat sensitif, mungkin perlu mendapatkan masa dari pelayan.

Jam Asas: Countdown ke Tarikh atau Masa tertentu

Membuat jam asas melibatkan langkah -langkah berikut:

Tetapkan tarikh akhir yang sah.
Kirakan baki masa.
Tukar masa ke format yang tersedia.
data jam output sebagai objek yang boleh diguna semula.
memaparkan jam pada halaman dan berhenti jam apabila sifar dicapai.

Tetapkan tarikh akhir yang sah

Pertama, anda perlu menetapkan tarikh akhir yang sah. Ini harus menjadi rentetan yang dapat difahami dalam mana -mana format menggunakan kaedah JavaScript

. Contohnya: Date.parse() Format ISO 8601:

Format pendek:

<code class="language-javascript">const deadline = '2015-12-31';</code>

atau format panjang:

<code class="language-javascript">const deadline = '31/12/2015';</code>

Setiap format membolehkan anda menentukan zon masa dan masa yang tepat (atau tentukan offset dari UTC dalam kes tarikh ISO). Contohnya:

<code class="language-javascript">const deadline = 'December 31 2015';</code>

Anda boleh membaca lebih lanjut mengenai format tarikh JavaScript dalam artikel ini.

Kirakan baki masa

Langkah seterusnya adalah untuk mengira masa yang tinggal. Kita perlu menulis fungsi yang menerima rentetan yang mewakili masa akhir yang diberikan (seperti yang diterangkan di atas). Kami kemudian mengira perbezaan antara masa itu dan masa semasa. Seperti yang ditunjukkan di bawah:

<code class="language-javascript">const deadline = '2015-12-31';</code>

Pertama, kami membuat pembolehubah total untuk menjimatkan masa yang tinggal sebelum tarikh akhir. Fungsi Date.parse() menukarkan rentetan masa ke nilai dalam milisaat. Ini membolehkan kita menolak dua kali dari satu sama lain dan mendapatkan jumlah masa antara kedua -duanya.

<code class="language-javascript">const deadline = '31/12/2015';</code>

menukar masa ke format yang tersedia

Sekarang kita mahu menukar milisaat menjadi hari, jam, minit dan saat. Mari mengambil beberapa saat sebagai contoh:

<code class="language-javascript">const deadline = 'December 31 2015';</code>

mari kita pecahkan apa yang berlaku di sini.

1. Bahagikan milisaat dengan 1000 hingga saat: (t/1000)
2. Bahagikan jumlah detik sebanyak 60 dan dapatkan selebihnya. Anda tidak memerlukan semua saat, anda hanya perlu mengira baki detik selepas minit: (t/1000) % 60
3. pusingan ke integer terdekat. Ini kerana anda memerlukan bilangan detik penuh, bukan bahagian pecahan yang kedua: Math.floor( (t/1000) % 60 )

Ulangi logik ini untuk menukar milisaat menjadi minit, jam, dan hari.

data jam output sebagai objek yang boleh diguna semula

Apabila kita menyediakan hari, jam, minit dan saat, kita kini boleh mengembalikan data sebagai objek yang boleh diguna semula:

<code class="language-javascript">const deadline = 'December 31 2015 23:59:59 GMT+0200';</code>

Objek ini membolehkan anda memanggil fungsi anda dan mendapatkan nilai yang dikira. Berikut adalah contoh bagaimana untuk mendapatkan minit yang tinggal:

<code class="language-javascript">function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}</code>

adakah ia mudah?

tunjukkan jam dan hentikannya apabila mencapai sifar

Sekarang kita mempunyai fungsi yang mengeluarkan hari, jam, minit, dan saat yang tinggal, dan kita boleh membina jam kita. Pertama, kami akan mencipta elemen HTML berikut untuk menjimatkan jam kami:

<code class="language-javascript">const total = Date.parse(endtime) - Date.parse(new Date());</code>

maka kami akan menulis fungsi yang mengeluarkan data jam ke Div baru kami:

<code class="language-javascript">const seconds = Math.floor( (t/1000) % 60 );</code>

Fungsi ini mengambil dua parameter. Mereka adalah ID elemen yang mengandungi jam kami dan masa akhir undur. Di dalam fungsi ini, kami akan mengisytiharkan pembolehubah clock dan menggunakannya untuk menyimpan rujukan ke Div Container Jam kami. Ini bermakna kita tidak perlu terus menanyakan DOM.

Seterusnya, kami akan melaksanakan fungsi tanpa nama sesaat menggunakan setInterval. Fungsi ini akan melakukan perkara berikut:

• Kirakan baki masa.
• output baki masa ke Div kami.
• Jika baki masa mencapai sifar, hentikan jam.

Pada ketika ini, satu -satunya langkah yang tinggal adalah untuk menjalankan jam, seperti yang ditunjukkan di bawah:

<code class="language-javascript">return {
  total,
  days,
  hours,
  minutes,
  seconds
};</code>

Tahniah! Anda kini mempunyai hanya 18 baris kod JavaScript untuk mempunyai jam asas.

Sediakan untuk memaparkan jam anda

kita perlu memperbaiki sedikit sebelum menetapkan gaya jam.

• Keluarkan kelewatan awal supaya jam anda akan dipaparkan dengan segera.
• Buat skrip jam lebih cekap supaya ia tidak membina semula keseluruhan jam secara berterusan.
• Tambah sifar terkemuka seperti yang diperlukan.

Padamkan kelewatan awal

Dalam jam, kami menggunakan setInterval untuk mengemas kini paparan setiap saat. Ini adalah OK dalam kebanyakan kes, tetapi pada mulanya, akan ada kelewatan kedua. Untuk mengeluarkan kelewatan ini, kita mesti mengemas kini jam sekali sebelum selang bermula.

mari kita gerakkan fungsi tanpa nama yang diluluskan ke setInterval ke dalam fungsi berasingannya sendiri. Kita boleh menamakan fungsi ini updateClock. Panggil fungsi setInterval sekali di luar updateClock dan panggilnya lagi di dalam setInterval. Dengan cara ini, jam akan dipaparkan tanpa berlengah -lengah.

Di JavaScript anda, ganti yang berikut:

<code class="language-javascript">const deadline = '2015-12-31';</code>

Gunakan yang berikut:

<code class="language-javascript">const deadline = '31/12/2015';</code>

Elakkan pembinaan semula jam yang berterusan

kita perlu membuat skrip jam lebih cekap. Kami mahu mengemas kini nombor dalam jam, dan bukannya membina semula keseluruhan jam setiap saat. Salah satu cara untuk melakukan ini ialah meletakkan setiap nombor di dalam tag <span></span> dan mengemas kini hanya kandungan <span></span>.

ini html:

<code class="language-javascript">const deadline = 'December 31 2015';</code>

Marilah kita mendapatkan rujukan kepada unsur -unsur ini. Tambahkan kod berikut selepas menentukan pembolehubah clock

<code class="language-javascript">const deadline = 'December 31 2015 23:59:59 GMT+0200';</code>

Seterusnya, kita perlu menukar fungsi updateClock untuk mengemas kini nombor sahaja. Kod baru akan kelihatan seperti ini:

<code class="language-javascript">function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}</code>

Tambah nol utama

Sekarang bahawa jam tidak lagi membina semula setiap saat, kami mempunyai satu lagi perkara yang perlu dilakukan: tambah nol terkemuka. Sebagai contoh, jam tidak memaparkan 7 saat, tetapi memaparkan 07 saat. Cara mudah ialah menambah rentetan "0" pada permulaan nombor dan kemudian memotong dua digit terakhir.

Sebagai contoh, untuk menambah nol terkemuka ke nilai "saat", anda akan mengubah perkara berikut:

<code class="language-javascript">const total = Date.parse(endtime) - Date.parse(new Date());</code>

untuk ini:

<code class="language-javascript">const seconds = Math.floor( (t/1000) % 60 );</code>

Anda juga boleh menambah nol utama ke minit dan jam jika anda lebih suka. Sekiranya anda datang sejauh ini, tahniah! Jam anda kini tersedia untuk dipaparkan.

Nota: Anda mungkin perlu mengklik "Rerun" dalam Codepen untuk memulakan undur.

pergi lebih jauh

Contoh berikut menunjukkan bagaimana untuk skala jam untuk beberapa kes penggunaan. Mereka semua berdasarkan contoh asas yang dilihat di atas.

Secara automatik menjadualkan jam

Katakan kami mahu jam dipaparkan pada beberapa hari dan tidak pada hari -hari lain. Sebagai contoh, kami mungkin mempunyai satu siri acara yang akan datang dan tidak mahu mengemas kini jam secara manual setiap kali. Inilah cara mengatur perkara terlebih dahulu.

Sembunyikan jam dengan menetapkan harta display jam ke none. Kemudian tambahkan yang berikut ke fungsi initializeClock (selepas garis bermula dengan var clock). Ini akan menyebabkan jam muncul hanya selepas memanggil fungsi initializeClock:

<code class="language-javascript">return {
  total,
  days,
  hours,
  minutes,
  seconds
};</code>

Seterusnya, kita boleh menentukan julat tarikh yang dipaparkan jam. Ini akan menggantikan pembolehubah deadline:

<code class="language-javascript">const deadline = '2015-12-31';</code>

schedule Setiap elemen dalam array mewakili tarikh mula dan tarikh akhir. Seperti yang disebutkan di atas, zon masa dan masa boleh dimasukkan, tetapi saya menggunakan tarikh normal di sini untuk memastikan kod itu boleh dibaca.

Akhirnya, apabila pengguna memuatkan halaman tersebut, kita perlu menyemak sama ada kita berada dalam julat masa yang ditentukan. Kod ini harus menggantikan panggilan sebelumnya ke fungsi initializeClock.

<code class="language-javascript">const deadline = '31/12/2015';</code>

Sekarang anda boleh menjadualkan jam terlebih dahulu tanpa mengemas kini secara manual. Anda boleh memendekkan kod seperti yang diperlukan. Untuk kebolehbacaan, saya membuat kod saya verbose.

Tetapkan pemasa 10 minit apabila pengguna tiba

Mungkin perlu untuk menetapkan undur untuk jumlah masa yang diberikan selepas pengguna tiba atau memulakan tugas tertentu. Kami akan menetapkan pemasa selama 10 minit di sini, tetapi anda boleh menggunakan jumlah masa yang anda mahukan.

kita hanya perlu menggantikan pembolehubah deadline dengan yang berikut:

<code class="language-javascript">const deadline = 'December 31 2015';</code>

Kod ini mendapat masa semasa dan menambah sepuluh minit. Nilai -nilai itu ditukar kepada milisaat, jadi mereka boleh ditambah bersama dan ditukar kepada tarikh akhir baru.

Sekarang kita mempunyai jam yang mengira sepuluh minit dari ketika pengguna tiba. Jangan ragu untuk mencuba masa yang berlainan.

kemajuan jam di seluruh halaman

Kadang -kadang perlu untuk menyelamatkan keadaan jam, bukan hanya halaman semasa. Jika kami mahu menetapkan pemasa 10 minit di seluruh laman web, kami tidak mahu ia menetapkan semula apabila pengguna pergi ke halaman yang berbeza.

Satu penyelesaian adalah untuk menjimatkan masa akhir jam dalam kuki. Dengan cara ini, menavigasi ke halaman baru tidak menetapkan semula masa akhir hingga sepuluh minit dari sekarang.

ini adalah logik:

1. Jika tarikh akhir dicatatkan dalam kuki, tarikh akhir digunakan.
2. Jika kuki tidak wujud, tarikh akhir baru ditetapkan dan disimpan dalam kuki.

untuk mencapai ini, ganti pembolehubah deadline dengan yang berikut:

<code class="language-javascript">const deadline = 'December 31 2015 23:59:59 GMT+0200';</code>

Kod ini menggunakan kuki dan ungkapan biasa, kedua -duanya adalah topik yang berasingan. Oleh itu, saya tidak akan pergi ke butiran di sini. Satu perkara yang perlu diperhatikan ialah anda perlu menukar .yourdomain.com ke nama domain sebenar anda.

Satu lagi amaran penting mengenai masa klien

tarikh dan masa JavaScript diambil dari komputer pengguna. Ini bermakna pengguna boleh menjejaskan jam JavaScript dengan mengubah masa di komputer mereka. Dalam kebanyakan kes, ini tidak penting. Tetapi dalam beberapa situasi yang sangat sensitif, masa diperlukan untuk diperoleh dari pelayan. Ini boleh dilakukan dengan beberapa PHP atau Ajax, yang berada di luar skop tutorial ini.

Selepas mendapat masa dari pelayan, kita boleh menggunakan teknik yang sama dalam tutorial ini untuk mengendalikannya.

Ringkasan

Setelah menyelesaikan contoh -contoh dalam artikel ini, anda kini tahu bagaimana untuk membuat pemasa undur anda sendiri dengan hanya sedikit kod JavaScript asli! Kami telah belajar bagaimana membuat jam undur asas dan memaparkannya dengan cekap. Kami juga merangkumi beberapa ciri tambahan yang berguna termasuk penjadualan, mutlak berbanding masa relatif, dan penggunaan kuki untuk menyelamatkan keadaan antara halaman dan akses laman web.

Langkah seterusnya

Cuba gunakan kod jam anda. Cuba tambah beberapa gaya kreatif atau ciri -ciri baru (seperti jeda dan pulihkan butang). Selepas itu, jika anda ingin berkongsi contoh jam sejuk, beritahu kami di forum.

soalan yang sering ditanya mengenai penggunaan masa dan tarikh di JavaScript

Bagaimana untuk mendapatkan tarikh dan masa semasa di JavaScript? Anda boleh menggunakan objek Date untuk mendapatkan tarikh dan masa semasa. Cukup buat contoh baru Date tanpa parameter, yang akan mewakili tarikh dan masa semasa.

Apakah tarikh biasa dan operasi masa di JavaScript? Operasi biasa termasuk tarikh pemformatan, rentetan tarikh parsing, mengira selang masa, menambah atau menolak masa, dan membandingkan tarikh.

Apakah cara yang disyorkan untuk menangani zon waktu di JavaScript? Adalah lebih baik untuk menggunakan masa UTC sebanyak mungkin untuk mengelakkan masalah zon waktu. Apabila memaparkan masa kepada pengguna, pertimbangkan untuk menggunakan kaedah toLocaleString dan menggunakan pilihan timeZone untuk menentukan zon waktu yang dikehendaki.

Bagaimana untuk mengira perbezaan antara dua tarikh dalam JavaScript? Anda boleh tolak dua objek Date untuk mendapatkan selang waktu dalam milisaat dan menukarnya menjadi hari, jam, minit, dan lain -lain menggunakan operasi matematik.

Bolehkah saya memanipulasi tarikh dengan mudah di JavaScript? Ya, JavaScript menyediakan beberapa cara untuk menambah dan menolak selang waktu ke tarikh. Objek Date mempunyai kaedah seperti setFullYear, setMonth, setDate, dan lain -lain, yang digunakan untuk operasi tarikh.

Atas ialah kandungan terperinci Bina pemasa undur hanya dalam 18 baris JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!