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

最初的挑戰(zhàn)

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

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

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

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

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

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

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

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

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

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

注意結(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)從一開始就運行一次，當(dāng)它達到條件(if(currentIndex === 0))時，它會切換數(shù)組。但是，當(dāng) 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ā)生，而不會先存取錯誤的陣列。

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

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

建立動態(tài) HTML 元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我還發(fā)現(xiàn)了另一個有用的資源，它教我如何在大螢?zāi)簧蟽H顯示三個 div，在小螢?zāi)簧巷@示兩個 div。訣竅是將容器寬度的 100% 除以 3（對於小螢?zāi)粍t除以 2）並減去邊距。這允許大小相同的 div 完美地適合容器（太聰明了?。?。最後，要查看最終的功能，請訪問我的GitHub。這是我的存儲庫的連結(jié)。

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

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

以上是API 每小時資料的響應(yīng)式 JavaScript 輪播的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！