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

最初的挑戰(zhàn)

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

認識不完整的解決方案和錯誤

我在網(wǎng)上發(fā)現(xiàn)了一些非常酷的東西，它可能會解決我的一個大問題。它幫助我了解模數(shù)運算符如何適用于圓形數(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)}`);
}

結果如下：
第一天：星期一
第 2 天：星期二
...

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

但是，我將錯誤的變量記錄到控制臺。因為，如果我這樣編寫 if 條件： if(currentIndex === 0)，它實際上會在循環(huán)開始時移向新數(shù)組。所以，現(xiàn)在我改為記錄“索引”，終于找到了答案！為了測試新代碼，我為 ‘months’ 創(chuàng)建了一個新數(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)}`);
}

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

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

當前索引 = (當前索引 1) % 9

這條線允許我在循環(huán)期間從第一天切換到第二天而不停止它。這是另一個試驗（我更新了數(shù)組以類似于 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)}`);
}

注意結果中一些有趣的東西：

索引為 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)從一開始就運行一次，當它達到條件(if(currentIndex === 0))時，它會切換數(shù)組。但是，當 currentIndex = 0（即 10 % 10 = 0）時，在執(zhí)行 if 條件之前會訪問 hours[currentIndex]。這就是為什么即使在切換之后您也會看到 dayOne 的值（例如“一”）。

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

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

通過改變條件的位置，可以確保切換在正確的時間發(fā)生，而不會先訪問錯誤的數(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)}`);
}

我的代碼快完成了。在這里，我犯的唯一錯誤是記錄 ‘星期一’ 而不是 ‘星期二’。雖然這些值來自 ‘Tuesday’ 數(shù)組，但由于編寫 console.log 語句的方式錯誤，它一直顯示 ‘Monday’。我想，將兩個和兩個放在一起并進行圖片記錄與實際將值放入 html 元素中是相當困難的。這是使用三元運算符的一些改進（是的，我再次切換了數(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ù)構建代碼，這是精煉版本：

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)建動態(tài) HTML 元素

我們來談談生成 12 個 div。我無法想象如何獲取父 div 兩側的按鈕，而 12 小時就漂浮在它們之間。如果我要在與按鈕相同的父級中生成 12 個 div，則按鈕元素將需要與 12 個 div 不同的對齊設置。

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

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

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

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

與這些示例不同的一點是我的容器最初會顯示 3 或 4 個 div。所以，當offset為0時，父容器中已經(jīng)有一定的長度了。

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

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

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

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

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

我無法考慮子 div 的整個長度。剩下的空白區(qū)域幾乎與容器的長度一樣多。解決方案是從子容器的總長度（包括邊距）中減去父容器的長度。這一調整有助于解決空白問題——唷！

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

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

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

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

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

最后，向所有經(jīng)驗豐富的開發(fā)人員大聲喊叫：您分享的每句話都會對這個領域的新手有所幫助。因此，請繼續(xù)發(fā)布您這邊的信息，因為我們正在另一邊等待渴望了解。謝謝你！

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