Karusel JavaScript Responsif untuk Data Setiap Jam API

Saya hampir tersalah anggap bahawa penyelesaian yang tidak lengkap adalah penyelesaian yang telah siap dan terus bekerja pada bahagian lain apl cuaca saya! Semasa mengusahakan karusel yang sepatutnya menunjukkan cuaca selama 12 jam, saya ingin menambahkan ciri yang akan membantu dalam mengambil jam pada hari berikutnya sekiranya hari semasa telah selesai. Walau bagaimanapun, daripada beralih ke hari berikutnya, karusel terus berputar kembali ke permulaan waktu hari semasa, dan saya tersilap menganggap tugas itu telah selesai. Baik!

Cabaran Awal

Saya memikirkan tentang dua 'untuk gelung' tetapi saya tidak fikir 'j' mencetak semua elemennya untuk panjang keseluruhan 'i' adalah betul. Saya dapati banyak blog dalam talian tentang penggunaan operator modulus untuk "tatasusunan bulat" Tetapi saya tidak tahu bagaimana ia akan membantu kes saya. Saya perlu mengulang waktu hari semasa dan kemudian beralih ke hari berikutnya setelah jam ditetapkan semula kepada sifar. Banyak yang berlaku dan saya perlu menjadikannya lebih ringkas dan meletakkan segala-galanya dalam satu fungsi. lasak!

Menyedari Penyelesaian dan Kesilapan Tidak Lengkap

Saya menjumpai sesuatu yang sangat menarik dalam talian, ia mungkin menyelesaikan masalah besar untuk saya. Ia membantu saya memahami cara pengendali modulus berfungsi untuk tatasusunan bulat. Berikut adalah contoh di laman web:

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

Hasilnya seperti:
Hari 1: Isnin
Hari 2: Selasa
...

Apa yang saya mahukan ialah, bukannya kembali ke tatasusunan daysOfWeek, dan bermula dari 'Isnin', ia sepatutnya pergi ke tatasusunan yang berbeza sama sekali. Jadi, saya membawa kod itu ke editor kod dan mengubahnya sedikit. Mula-mula, saya membuat pembolehubah yang dipanggil ‘currentIndex’ dan menyimpan operasi modulus di dalamnya. Kemudian saya log masuk ke konsol. Ia ditetapkan semula selepas 6 dan menjadi sifar semula.

Walaupun, saya telah log pembolehubah yang salah ke konsol. Kerana, jika saya menulis keadaan if seperti ini: if(currentIndex === 0), ia sebenarnya akan bergerak ke arah tatasusunan baharu tepat pada permulaan gelung. Jadi, sekarang saya log masuk "indeks" sebaliknya, dan akhirnya saya menemui jawapannya! Untuk menguji kod baharu, saya membuat tatasusunan baharu untuk ‘bulan’ dan kemudian cuba menukarnya. Tetapi saya melakukan satu lagi kesilapan—biar saya tunjukkan kepada anda:

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
const months = [
  'Jan',
  'Feb',
  'March'
];
// Function to cycle through the days of the week
function cycleDays(index) {
  let currentIndex = index % daysOfWeek.length
  console.log(index)
 if(index === 7){
   return months[currentIndex]
 } else {
     return daysOfWeek[currentIndex];
 }
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

Selepas mengelog "Jan", ia bertukar kembali kepada tatasusunan asal. Kesilapannya ialah semakan kesaksamaan yang ketat, saya sepatutnya menggunakan ‘lebih besar daripada atau sama dengan’ sebaliknya. Apabila saya memasangkannya, ia berjaya bertukar kepada tatasusunan baharu!

Sekarang, saya mahu gelung bermula dari jam semasa dan diteruskan tanpa henti, dengan penanda dipasang untuk bertukar antara tatasusunan. Penanda itu akan menjadi pengendali modulus dan bukannya panjang tatasusunan. Saya juga boleh menggunakan panjang tatasusunan, yang dalam kes ini ialah 24, tetapi saya berpegang pada nilai berkod keras 24 buat masa ini.

currentIndex = (currentIndex 1) % 9

Barisan ini membolehkan saya menukar dari hari pertama ke hari kedua semasa gelung tanpa menghentikannya. Berikut ialah satu lagi percubaan (saya mengemas kini tatasusunan agar menyerupai hasil API):

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

Perhatikan sesuatu yang menarik dalam keputusan:

indeks ialah 5 dan hari Isnin ialah enam dan i ialah 0
indeks ialah 6 dan hari Isnin ialah tujuh dan i ialah 1
indeks ialah 7 dan hari Isnin ialah lapan dan i ialah 2
indeks ialah 8 dan Isnin ialah sembilan dan i ialah 3
indeks ialah 9 dan hari Isnin ialah sepuluh dan i ialah 4
indeks ialah 0 dan hari Isnin ialah satu dan i ialah 5
indeks ialah 0 dan hari Selasa ialah 11
indeks ialah 1 dan hari Isnin ialah 12 dan i ialah 6
indeks ialah 2 dan hari Isnin ialah 13 dan i ialah 7
indeks ialah 3 dan hari Isnin ialah 14 dan i ialah 8
indeks ialah 4 dan hari Isnin ialah ¬15 dan i ialah 9

Isu di sini ialah gelung berjalan sekali dari mula dan apabila ia mencapai keadaan (jika(currentIndex === 0)), ia menukar tatasusunan. Walau bagaimanapun, apabila currentIndex = 0 (iaitu, 10 % 10 = 0), jam[currentIndex] diakses sebelum syarat if dilaksanakan. Itulah sebabnya anda melihat nilai dari dayOne (seperti "satu") walaupun selepas suis.

Untuk membetulkannya, keadaan if perlu disemak sejurus selepas currentIndex menjadi 0, supaya suis tatasusunan berlaku sebelum log:

console.log(indeks ialah ${currentIndex} dan hari Isnin ialah ${hours[currentIndex]} dan i ialah ${i})...

Dengan menukar kedudukan keadaan, ia boleh dipastikan bahawa suis berlaku pada masa yang betul tanpa terlebih dahulu mengakses tatasusunan yang salah.

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
const months = [
  'Jan',
  'Feb',
  'March'
];
// Function to cycle through the days of the week
function cycleDays(index) {
  let currentIndex = index % daysOfWeek.length
  console.log(index)
 if(index === 7){
   return months[currentIndex]
 } else {
     return daysOfWeek[currentIndex];
 }
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

Kod saya hampir sampai. Di sini, satu-satunya kesilapan yang saya lakukan ialah mengelog ‘Isnin’ dan bukannya ‘Selasa’. Nilainya adalah daripada tatasusunan ‘Selasa’, tetapi ia tetap menyebut ‘Isnin’ kerana cara yang salah menulis pernyataan console.log. Saya rasa, Agak sukar untuk meletakkan dua dan dua bersama-sama dan pembalakan gambar VS sebenarnya memasukkan nilai ke dalam elemen html. Berikut adalah sedikit peningkatan menggunakan operator ternary (ya, saya menukar elemen tatasusunan, sekali lagi!):

const dayOne = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
const dayTwo = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
let hours = dayOne;
let currentHour = 5;
function cycleDays(currentHour) {
  let currentIndex = currentHour
  for (let i = 0; i < 10; i++) {
    console.log(`index is ${currentIndex} and dayOne is ${hours[currentIndex]}`)
    if(currentIndex === 0){
      hours = dayTwo
    console.log(`index is ${currentIndex} and dayTwo is ${hours[currentIndex]}`)
    } 
  currentIndex = (currentIndex + 1) % 9

} 
}
cycleDays(currentHour)

Akhir sekali, saya boleh membina kod saya untuk data 3 hari yang saya dapatkan daripada api, berikut ialah versi yang diperhalusi:

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

Mencipta Elemen HTML Dinamik

Mari bincang tentang menjana 12 div. Saya tidak dapat membayangkan cara mendapatkan butang pada kedua-dua belah div induk manakala 12 jam hanya terapung di antara mereka. Jika saya menjana 12 div dalam induk yang sama dengan butang, maka elemen butang memerlukan tetapan justifikasi yang berbeza daripada 12 div.

Adalah masuk akal untuk membenarkan mereka mempunyai bekas sendiri. Saya mengambil sedikit masa untuk memikirkan perkara ini-saya sebenarnya terpaksa tidur di atasnya. Kemudian keesokan harinya, saya menaip .btn-container dan tekan tab dan dari situ, semuanya mengklik. Saya telah melihat setiap item berkumpulan dan bekas mereka sendiri di dalam bekas induk dalam tutorial John Smilga, saya tidak tahu mengapa pengumpulan sedemikian diperlukan sehingga saya mula mereka bentuk bekas 24 jam. Ia adalah 'detik gotcha' sebenar.

Kini datang satu lagi masalah yang berlarutan berhari-hari. Gelangsar yang saya reka dalam tutorial tidak begitu mencabar seperti div ini. Dalam tutorial, terdapat nilai terjemahan yang mudah, tetapi sekarang saya mempunyai beberapa isu. Pada skrin yang lebih kecil, div itu bersatu dan mula kelihatan seperti spageti.

Dan, apabila saya menggunakan sifat translateX yang mudah, bermakna apabila saya 'meneka' piksel, terdapat banyak ruang yang tinggal selepas div telah diterjemahkan sepenuhnya ke kiri. Ini bermakna mereka menterjemah lebih daripada lebar gabungan mereka. Saya perlu mencari nilai yang sesuai untuk memastikan div berhenti tepat pada penghujung tanpa meninggalkan ruang tambahan itu. Setelah sekian lama mencari, saya terjumpa satu blog yang menawarkan pelbagai penyelesaian.

Terdapat banyak penyelesaian. Beberapa daripada mereka menggunakan operator modulo, yang mengingatkan saya tentang logik tatasusunan bulat yang saya gunakan semasa menukar hari dalam 'untuk gelung'. Terdapat banyak ulasan di sini yang menggunakan Math.min dan Math.max. Yang pada asasnya akan membuat bekas itu diterjemahkan sehingga akhir panjangnya dicapai. Cemerlang! Jadi tiada lagi ruang putih? Tidak begitu pantas...

Satu perkara yang berbeza daripada contoh ini ialah bekas saya pada mulanya akan memaparkan 3 atau 4 div. Jadi, apabila offset ialah 0, sudah ada jumlah panjang tertentu dalam bekas induk.

Mereka menunjukkan imej dengan menambah nombor 1. Jadi, karusel mereka akan meluncur 1 imej ke hadapan mengikut nombor indeks imej dalam tatasusunan. Contohnya, jika terdapat 10 imej dalam bekas dan kami menambah satu pada pembolehubah Imej semasa, nilai yang dikira oleh Math.min akan menjadi '1'. Kemudian, apabila kita menambah satu lagi '1', imej semasa akan menjadi 2 dan nilainya akan menjadi 2 oleh Math.min kerana 2 mod 10 ialah 2. Contoh khusus ini akan mengubah permainan peluncur yang Saya cuba buat. Ini adalah kod yang menarik perhatian saya:

const daysOfWeek = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
// Function to cycle through the days of the week
function cycleDays(index) {
  return daysOfWeek[index % daysOfWeek.length];
}
// Let's cycle through the days:
for (let i = 0; i < 10; i++) {
  console.log(`Day ${i + 1}: ${cycleDays(i)}`);
}

Kecemerlangan di sebalik penyelesaian Richard Kichenama, yang terdapat dalam ulasan, terletak pada penggunaan Math.max untuk memastikan nilai tidak jatuh di bawah 0 dan Math.min untuk mengira nilai terjemahan sehingga mencapai panjang maksimum tatasusunan imej.

Sekarang, bagaimana saya hendak menyelesaikan masalah ruang putih? Saya terpaksa mempertimbangkan jidar semua div kanak-kanak dan menambahkannya bersama-sama untuk mendapatkan keseluruhan panjang div kanak-kanak. Kemudian, peluncur harus berhenti bergerak sebaik sahaja anak terakhir dicapai. Ini bermakna jumlah lebar ialah jumlah semua lebar kanak-kanak ditambah jidar mereka.

Walau bagaimanapun, saya menghadapi isu lain: beberapa div telah dipaparkan dalam bekas, yang menyebabkan saya tersekat lagi. Nasib baik ada kawan saya datang menyelamatkan. Selepas membincangkan masalah dengan mereka, inilah yang saya faham:

Saya tidak dapat mempertimbangkan keseluruhan panjang div kanak-kanak. Terdapat hampir sama banyak ruang putih yang tinggal dengan panjang bekas. Penyelesaiannya adalah untuk menolak panjang bekas induk daripada jumlah panjang kanak-kanak (termasuk margin). Pelarasan ini membantu menyelesaikan isu ruang putih—phew!

Sesetengah contoh kod mempunyai pembolehubah yang seperti 'kaunter'. Ia bertindak sebagai 'kaunter' untuk menterjemah harta. Apabila pembolehubah ini meningkat, sifat terjemah meningkat dan seterusnya. Saya memisahkan sifat Math.min dan Math.max untuk butang seterusnya dan sebelumnya. Ia lebih membantu dan lebih mudah dengan cara itu.

Dalam contoh yang saya rujuk, kod itu menggunakan panjang tatasusunan untuk menentukan jarak slaid, tetapi, mengikut perbincangan saya sebelum ini dengan rakan saya, saya perlu mempertimbangkan ruang putih supaya saya perlu menolak panjang bekas itu. Dengan cara ini, saya memastikan bahawa div saya hanya boleh bergerak mengikut jumlah tertentu, mengelakkan ruang tambahan pada penghujungnya.

Selain itu, terima kasih kepada tutorial john smilga, saya belajar cara mendapatkan lebar, ketinggian, sifat teratas item. Ia adalah satu perjuangan untuk menggunakan yang betul, ia juga satu perjuangan untuk mengetahui bahawa beberapa nilai adalah rentetan dan perlu diubah menjadi nombor. Saya dapati itu dengan mudah di google dan diperkenalkan dengan ‘parseFloat’.

Saya juga menemui satu lagi sumber berguna yang mengajar saya cara memaparkan hanya tiga div untuk skrin besar dan dua div untuk skrin kecil. Caranya ialah membahagikan 100% lebar bekas dengan 3 (atau 2 untuk skrin kecil) dan tolak margin. Ini membenarkan div bersaiz sama yang sesuai dengan sempurna dalam bekas (sangat bijak!). Akhir sekali, untuk menyemak fungsi akhir, sila lawati GitHub saya. Berikut adalah pautan ke repositori saya.

Pendengar acara tetingkap untuk mengubah saiz adalah penting dalam menyelesaikan isu penjajaran dalam bekas saya. Ia menangani masalah "Flash of Unstyled Content" (FOUC) dengan menetapkan semula ofset pada saiz semula. Saya harus berterima kasih kepada rakan saya kerana membantu saya memahami cara mengira maxOffset—itu adalah penukar permainan sebenar.

Akhir sekali, laungan kepada semua pembangun yang berpengalaman: setiap perkataan yang anda kongsi membantu seseorang yang baharu dalam bidang itu. Jadi, teruskan menyiarkan maklumat dari hujung anda, kerana kami sedang menunggu di pihak lain dengan bersemangat untuk belajar. terima kasih!

Atas ialah kandungan terperinci Karusel JavaScript Responsif untuk Data Setiap Jam API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!