API 每小時資料的響應式 JavaScript 輪播

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

最初的挑戰

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

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

我在網路上發現了一些非常酷的東西，它可能會解決我的一個大問題。它幫助我了解模數運算子如何適用於圓形數組。這是網站上的範例：

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

我想要的是，它不應該回到 daysOfWeek 數組，並從 'Monday' 開始，而是應該轉到一個完全不同的陣列。因此，我將程式碼帶到程式碼編輯器中並進行了一些更改。首先，我建立了一個名為 ‘currentIndex’ 的變量，並將模數運算儲存在其中。然後我將其記錄到控制台。 6點後重置並再次變為零。

但是，我將錯誤的變數記錄到控制台。因為，如果我這樣寫 if 條件： if(currentIndex === 0)，它實際上會在循環開始時移向新數組。所以，現在我改為記錄“索引”，終於找到了答案！為了測試新程式碼，我為 ‘months’ 建立了一個新數組，然後嘗試切換。但我又犯了一個錯誤──讓我告訴你：

記錄「Jan」後，它會切換回原始陣列。錯誤是嚴格的相等檢查，我應該使用‘大於或等於’來代替。當我插入它時，它成功切換到新陣列！

現在，我希望循環從當前小時開始並繼續而不停止，並使用標記在數組之間切換。該標記將是模運算子而不是數組的長度。我也可以使用陣列的長度，在本例中為 24，但我現在堅持使用硬編碼值 24。

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

這條線允許我在循環期間從第一天切換到第二天而不停止它。這是另一個試驗（我更新了數組以類似於 API 結果）：

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

索引為 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

這裡的問題是循環從一開始就運行一次，當它達到條件(if(currentIndex === 0))時，它會切換數組。但是，當 currentIndex = 0（即 10 % 10 = 0）時，在執行 if 條件之前會存取 hours[currentIndex]。這就是為什麼即使在切換之後您也會看到 dayOne 的值（例如「一」）。

要解決此問題，需要在 currentIndex 變為 0 後立即檢查 if 條件，以便在記錄之前發生數組切換：

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

透過改變條件的位置，可以確保切換在正確的時間發生，而不會先存取錯誤的陣列。

我的程式碼快完成了。在這裡，我犯的唯一錯誤是記錄 ‘星期一’ 而不是 ‘星期二’。雖然這些值來自 ‘Tuesday’ 數組，但由於寫 console.log 語句的方式錯誤，它一直顯示 ‘Monday’。我想，將兩個和兩個放在一起並進行圖片記錄與實際將值放入 html 元素中是相當困難的。這是使用三元運算符的一些改進（是的，我再次切換了數組的元素！）：

最後，我可以為從 api 檢索的 3 天資料建立程式碼，這是精煉版本：

建立動態 HTML 元素

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

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

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

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

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

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

他們透過添加數字 1 來顯示圖像。因此，他們的輪播會根據陣列中圖像的索引號碼向前滑動 1 張圖像。例如，如果容器中有 10 個影像，我們在 currentImage 變數中加入 1 個影像，則 Math.min 計算出的值將為「1」。然後，當我們添加另一個“1”時，當前圖像將是 2，並且 Math.min 的值將是 2，因為 2 mod 10 是 2。這個特定的範例將改變滑桿的遊戲我正在努力做。這是引起我注意的程式碼：

在評論中發現 Richard Kichenama 解決方案的巧妙之處在於使用 Math.max 來確保值不會低於 0，並使用 Math.min 來計算平移值，直到達到最大長度圖像數組。

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

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

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

有些程式碼範例有一個類似「計數器」的變數。它充當翻譯屬性的“計數器”。當這個變數增加時，翻譯屬性增加等等。我將下一個和上一個按鈕的 Math.min 和 Math.max 屬性分開。這樣更有幫助，也更容易。

在我引用的範例中，程式碼使用陣列的長度來決定滑動距離，但是，根據我之前與朋友的討論，我需要考慮空白，所以我必須減去容器。這樣，我確保了我的 div 只能移動特定的量，避免了末端的額外空間。

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

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

用於調整大小的視窗事件偵聽器對於解決容器中的對齊問題至關重要。它透過重置調整大小時的偏移量解決了「無樣式內容的 Flash」(FOUC) 問題。我必須感謝我的朋友幫助我了解如何計算 maxOffset——這真的改變了遊戲規則。

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

以上是API 每小時資料的響應式 JavaScript 輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章！