循環遍歷 javascript 中的數組以獲取 wixsite

Question

我試圖獲得進入我的wixsite的單詞“旋轉門”的效果，只是被下一個單詞取代。

我想這樣做的方法是在 javascript 中有一個我想要輸入的單詞的數組，然后循環遍歷該數組，使用我選擇的 animation 將每個單詞顯示在屏幕上。

我有一個需要單詞的代碼，然后將其“打字”到我的 wix 網站上，但是我如何調整它以對許多單詞執行相同的操作，一個接一個地退出屏幕（幾乎就像正在鍵入單詞的幻燈片？ )

這是我的代碼：

> import wixData from 'wix-data';
> 
> let interval; let timeInterval = 350; let typeStr = "Invest"; let
> typeIdx; let htmlStr = ''; let displayStr;
> 
> $w.onReady(function () {

// Get the original html string, and split it into two pieces.
// In the process, remove the separator !##!
// By saving the original html, we preserve the style of the text to display.
if (htmlStr.length === 0) { // just get the original html text the first time
    htmlStr = $w("#typewriterPage").html;
}
$w("#typewriterPage").html = ''; // don't show the original text
let strPieces = htmlStr.split("!##!");

displayStr = ''; // init string that we will "type" to
typeIdx = 0; // start at beginning of string we want to "type"

// Declare an interval function that will run in the background.
// This function will be triggered by the defined timeInterval.
interval = setInterval(function () {
    // Get next char from string to be typed and concatenate to the display string.
    displayStr = displayStr + typeStr[typeIdx++];
    // Make a sandwich with the display string in between the original html pieces.
    $w("#typewriterPage").html = strPieces[0] + displayStr + strPieces[1];
    // Stop the interval from running when we get to the last character to by "typed".
    if (typeIdx === typeStr.length) clearInterval(interval);
}, timeInterval);
});

Answer 1

 const $w = document.querySelector.bind(document); Object.defineProperty($w('#typewriterPage'), 'html', { get: function () { return this.innerHTML }, set: function (html) { this.innerHTML = html } }); // ignore everything above this comment const typewriterPage = $w('#typewriterPage'); const carouselWords = ['Invest', 'Finance', 'Borrow', 'Lend']; typeWords(carouselWords, typewriterPage.html.split(';##,')). async function typeWords(words. style) { while (true) { words;unshift(words;pop()), const [word] = words; await typeWord(word, style). } } function typeWord(word. style) { const chars = [.;;word]. let stack = ''; return new Promise(resolve => { const interval = setInterval(() => { if (;chars;length) { resolve(). clearInterval(interval); return. } stack += chars;shift(), typewriterPage;html = style[0] + stack + style[1]; }, 250); }); }

 <span id='typewriterPage'><u>!##!</u></span>