我差點(diǎn)把一個(gè)不完整的解決方案誤認(rèn)為是一個(gè)已完成的解決方案，然后繼續(xù)研究我的天氣應(yīng)用程序的其他部分！在制作應(yīng)該顯示 12 小時(shí)天氣的輪播時(shí)，我想添加一項(xiàng)功能，該功能將有助于在當(dāng)天結(jié)束時(shí)獲取第二天的時(shí)間。然而，輪播并沒有過渡到第二天，而是不斷循環(huán)回到當(dāng)天的開始時(shí)間，我錯(cuò)誤地認(rèn)為任務(wù)已經(jīng)完成。哎呀！

最初的挑戰(zhàn)

我考慮過兩個(gè)“for 循環(huán)”，但我不認(rèn)為“j”打印整個(gè)“i”長(zhǎng)度的所有元素是正確的。我在網(wǎng)上找到了很多關(guān)于“圓形數(shù)組”中模數(shù)運(yùn)算符的使用的博客，但我不知道這對(duì)我的情況有什么幫助。我需要循環(huán)當(dāng)前一天的時(shí)間，然后在時(shí)間重置為零后切換到第二天。發(fā)生了很多事情，我需要使其更加簡(jiǎn)潔，并將所有內(nèi)容都放在一個(gè)函數(shù)中。艱難的！

認(rèn)識(shí)不完整的解決方案和錯(cuò)誤

我在網(wǎng)上發(fā)現(xiàn)了一些非?？岬臇|西，它可能會(huì)解決我的一個(gè)大問題。它幫助我了解模數(shù)運(yùn)算符如何適用于圓形數(shù)組。這是網(wǎng)站上的示例：

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)}`);
}

結(jié)果如下：
第一天：星期一
第 2 天：星期二
...

我想要的是，它不應(yīng)該返回到 daysOfWeek 數(shù)組，并從 'Monday' 開始，而是應(yīng)該轉(zhuǎn)到一個(gè)完全不同的數(shù)組。因此，我將代碼帶到代碼編輯器中并進(jìn)行了一些更改。首先，我創(chuàng)建了一個(gè)名為 ‘currentIndex’ 的變量，并將模數(shù)運(yùn)算存儲(chǔ)在其中。然后我將其記錄到控制臺(tái)。 6點(diǎn)后重置并再次變?yōu)榱恪?

但是，我將錯(cuò)誤的變量記錄到控制臺(tái)。因?yàn)椋绻疫@樣編寫 if 條件： if(currentIndex === 0)，它實(shí)際上會(huì)在循環(huán)開始時(shí)移向新數(shù)組。所以，現(xiàn)在我改為記錄“索引”，終于找到了答案！為了測(cè)試新代碼，我為 ‘months’ 創(chuàng)建了一個(gè)新數(shù)組，然后嘗試進(jìn)行切換。但我又犯了一個(gè)錯(cuò)誤——讓我告訴你：

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)}`);
}

記錄“Jan”后，它切換回原始數(shù)組。錯(cuò)誤是嚴(yán)格的相等檢查，我應(yīng)該使用‘大于或等于’來(lái)代替。當(dāng)我插入它時(shí)，它成功切換到新陣列！

現(xiàn)在，我希望循環(huán)從當(dāng)前小時(shí)開始并繼續(xù)而不停止，并使用標(biāo)記在數(shù)組之間切換。該標(biāo)記將是模運(yùn)算符而不是數(shù)組的長(zhǎng)度。我還可以使用數(shù)組的長(zhǎng)度，在本例中為 24，但我現(xiàn)在堅(jiān)持使用硬編碼值 24。

當(dāng)前索引 = (當(dāng)前索引 1) % 9

這條線允許我在循環(huán)期間從第一天切換到第二天而不停止它。這是另一個(gè)試驗(yàn)（我更新了數(shù)組以類似于 API 結(jié)果）：

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)}`);
}

注意結(jié)果中一些有趣的東西：

索引為 5，星期一為 6，i 為 0
索引是 6，星期一是 7，i 是 1
索引是 7，星期一是 8，i 是 2
索引是 8，星期一是 9，i 是 3
索引是 9，星期一是 10，i 是 4
索引為 0，星期一為 1，i 為 5
索引為 0，周二為 11
索引是 1，星期一是 12，i 是 6
索引是 2，星期一是 13，i 是 7
索引是 3，星期一是 14，i 是 8
索引是 4，星期一是 ?15，i 是 9

這里的問題是循環(huán)從一開始就運(yùn)行一次，當(dāng)它達(dá)到條件(if(currentIndex === 0))時(shí)，它會(huì)切換數(shù)組。但是，當(dāng) currentIndex = 0（即 10 % 10 = 0）時(shí)，在執(zhí)行 if 條件之前會(huì)訪問 hours[currentIndex]。這就是為什么即使在切換之后您也會(huì)看到 dayOne 的值（例如“一”）。

要解決此問題，需要在 currentIndex 變?yōu)?0 后立即檢查 if 條件，以便在記錄之前發(fā)生數(shù)組切換：

console.log（索引為 ${currentIndex}，星期一為 ${hours[currentIndex]}，i 為 ${i}）...

通過改變條件的位置，可以確保切換在正確的時(shí)間發(fā)生，而不會(huì)先訪問錯(cuò)誤的數(shù)組。

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)}`);
}

我的代碼快完成了。在這里，我犯的唯一錯(cuò)誤是記錄 ‘星期一’ 而不是 ‘星期二’。雖然這些值來(lái)自 ‘Tuesday’ 數(shù)組，但由于編寫 console.log 語(yǔ)句的方式錯(cuò)誤，它一直顯示 ‘Monday’。我想，將兩個(gè)和兩個(gè)放在一起并進(jìn)行圖片記錄與實(shí)際將值放入 html 元素中是相當(dāng)困難的。這是使用三元運(yùn)算符的一些改進(jìn)（是的，我再次切換了數(shù)組的元素?。?br>

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)

最后，我可以為從 api 檢索的 3 天數(shù)據(jù)構(gòu)建代碼，這是精煉版本：

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)}`);
}

創(chuàng)建動(dòng)態(tài) HTML 元素

我們來(lái)談?wù)勆?12 個(gè) div。我無(wú)法想象如何獲取父 div 兩側(cè)的按鈕，而 12 小時(shí)就漂浮在它們之間。如果我要在與按鈕相同的父級(jí)中生成 12 個(gè) div，則按鈕元素將需要與 12 個(gè) div 不同的對(duì)齊設(shè)置。

只有讓他們擁有自己的容器才有意義。我花了一段時(shí)間才弄清楚這一點(diǎn)——實(shí)際上我不得不睡覺。然后第二天，我輸入 .btn-container 并點(diǎn)擊 Tab，從那里開始，一切都點(diǎn)擊了。我在 John Smilga 的教程中看到了每個(gè)分組的項(xiàng)目以及它們自己的容器位于父容器內(nèi)，直到我開始設(shè)計(jì) 24 小時(shí)容器時(shí)我才知道為什么需要這樣的分組。這真是一個(gè)“陷阱時(shí)刻”。

現(xiàn)在又出現(xiàn)了一個(gè)困擾了好幾天的問題。我在教程中設(shè)計(jì)的滑塊并不像這些 div 那樣具有挑戰(zhàn)性。在教程中，有一個(gè)簡(jiǎn)單的翻譯值，但現(xiàn)在我有很多問題。在較小的屏幕上，div 粘在一起，開始看起來(lái)像意大利面條。

而且，當(dāng)我使用一個(gè)簡(jiǎn)單的translateX屬性時(shí)，這意味著當(dāng)我“猜測(cè)”像素時(shí)，div完全向左平移后留下了很多空間。這意味著他們平移的寬度超過了它們的總寬度。我需要找到一個(gè)合適的值來(lái)確保 div 完全停止在末尾而不留下額外的空間。找了好久，發(fā)現(xiàn)一個(gè)博客，提供了各種解決方案。

有很多解決方案。其中一些使用了模運(yùn)算符，這讓我想起了在“for 循環(huán)”中切換日期時(shí)應(yīng)用的循環(huán)數(shù)組邏輯。這里有很多評(píng)論使用了 Math.min 和 Math.max。這基本上會(huì)使容器平移，直到到達(dá)其長(zhǎng)度的末端。出色的！那么沒有更多的空白了嗎？ 沒那么快...

與這些示例不同的一點(diǎn)是我的容器最初會(huì)顯示 3 或 4 個(gè) div。所以，當(dāng)offset為0時(shí)，父容器中已經(jīng)有一定的長(zhǎng)度了。

他們通過添加數(shù)字 1 來(lái)顯示圖像。因此，他們的輪播會(huì)根據(jù)數(shù)組中圖像的索引號(hào)向前滑動(dòng) 1 張圖像。例如，如果容器中有 10 個(gè)圖像，我們向 currentImage 變量添加 1 個(gè)圖像，則 Math.min 計(jì)算出的值將為“1”。然后，當(dāng)我們添加另一個(gè)“1”時(shí)，當(dāng)前圖像將是 2，并且 Math.min 的值將是 2，因?yàn)?2 mod 10 是 2。這個(gè)特定的示例將改變滑塊的游戲我正在努力做。這是引起我注意的代碼：

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)}`);
}

在評(píng)論中發(fā)現(xiàn) Richard Kichenama 解決方案的巧妙之處在于使用 Math.max 來(lái)確保值不會(huì)低于 0，并使用 Math.min 來(lái)計(jì)算平移值，直到達(dá)到最大長(zhǎng)度圖像數(shù)組。

現(xiàn)在，我該如何解決空白問題？我必須考慮所有子 div 的邊距，并將它們加在一起以獲得子 div 的整個(gè)長(zhǎng)度。然后，一旦到達(dá)最后一個(gè)子項(xiàng)，滑塊就應(yīng)該停止移動(dòng)。這意味著總寬度是所有子項(xiàng)寬度加上邊距的總和。

但是，我遇到了另一個(gè)問題：一些 div 已經(jīng)顯示在容器中，這讓我再次陷入困境。幸運(yùn)的是，我的一個(gè)朋友救了我。與他們討論問題后，我的理解是：

我無(wú)法考慮子 div 的整個(gè)長(zhǎng)度。剩下的空白區(qū)域幾乎與容器的長(zhǎng)度一樣多。解決方案是從子容器的總長(zhǎng)度（包括邊距）中減去父容器的長(zhǎng)度。這一調(diào)整有助于解決空白問題——?。?/p>

一些代碼示例有一個(gè)類似于“計(jì)數(shù)器”的變量。它充當(dāng)翻譯屬性的“計(jì)數(shù)器”。當(dāng)這個(gè)變量增加時(shí)，翻譯屬性增加等等。我將下一個(gè)和上一個(gè)按鈕的 Math.min 和 Math.max 屬性分開。這樣更有幫助，也更容易。

在我引用的示例中，代碼使用數(shù)組的長(zhǎng)度來(lái)確定滑動(dòng)距離，但是，根據(jù)我之前與朋友的討論，我需要考慮空白，所以我必須減去容器。這樣，我確保了我的 div 只能移動(dòng)特定的量，避免了末尾的額外空間。

另外，感謝 john smilga 的教程，我學(xué)會(huì)了如何獲取項(xiàng)目的寬度、高度、頂部屬性。應(yīng)用正確的值是一項(xiàng)艱巨的任務(wù)，找出某些值是字符串并且需要將其轉(zhuǎn)換為數(shù)字也是一項(xiàng)艱巨的任務(wù)。我在谷歌上輕松找到了這一點(diǎn)，并被介紹給‘parseFloat’。

我還發(fā)現(xiàn)了另一個(gè)有用的資源，它教我如何在大屏幕上僅顯示三個(gè) div，在小屏幕上顯示兩個(gè) div。訣竅是將容器寬度的 100% 除以 3（對(duì)于小屏幕則除以 2）并減去邊距。這允許大小相同的 div 完美地適合容器（太聰明了！）。最后，要查看最終的功能，請(qǐng)?jiān)L問我的GitHub。這是我的存儲(chǔ)庫(kù)的鏈接。

用于調(diào)整大小的窗口事件偵聽器對(duì)于解決容器中的對(duì)齊問題至關(guān)重要。它通過重置調(diào)整大小時(shí)的偏移量解決了“無(wú)樣式內(nèi)容的 Flash”(FOUC) 問題。我必須感謝我的朋友幫助我了解如何計(jì)算 maxOffset——這真的改變了游戲規(guī)則。

最后，向所有經(jīng)驗(yàn)豐富的開發(fā)人員大聲喊叫：您分享的每句話都會(huì)對(duì)這個(gè)領(lǐng)域的新手有所幫助。因此，請(qǐng)繼續(xù)發(fā)布您這邊的信息，因?yàn)槲覀冋诹硪贿叺却释私?。謝謝你！

以上是API 每小時(shí)數(shù)據(jù)的響應(yīng)式 JavaScript 輪播的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！