動態改變網站中的單詞

Question

我想知道如何在一系列單詞中循環，以便每改變一次，比如5秒左右。無論如何要做到這一點？ （我希望這將涉及的JavaScript）

的影響可以在這裏看到：http://www.tivix.com/

Answer 1

5Yea，它在jQuery的

非常簡單，您可以創建你想要互換，像這樣的話數組：

var words = new Array('word1','word2','word3'); 

然後，您可以設置一個間隔來不斷循環數組。

var i = 0; 
setInterval(function(){ 
    $('#wordDiv').empty().append(words[ i ]); 
    if(i < words.length) { 
     i++; 
    } else { 
     i = 0; 
    } 
}, 5000); 

那麼間隔所做的是它會永遠循環下去（除非您選擇打破它），隨着每次迭代在5秒（5000毫秒）休息。 i計數器用於指向下一個數組位置：i++（如果有的話 - 如果沒有，它將移回數組i = 0的起始位置）。

如果你想在沒有jQuery的JavaScript中這樣說。

Answer 2

這很簡單，不需要不需要jQuery的

__ 下面是一個例子 __

var words = ['hello world', 'foo bar', 'john smith', 'my name'], // 1 
    element = document.body, // 2 
    currentWord = -1; //3 

window.setInterval(function(){ // 4 
    currentWord++; // 5 
    if(currentWord > words.length) currentWord = 0; // 6 
    element.textContent = words[currentWord]; // 7 
}, 5000); // -- 4 

---

JSFiddle Demo Link

---

步驟

1. 這只是一個詞
2. 的話將進入
3. 當前詞的索引元素的數組。設置爲-1，因爲我們將更改文本之前，加入1
4. 創建循環每5000毫秒（5秒）
5. 增量的currentWord（+ 1）
6. 功能如果currentWord（指數）較高數比字陣列 的長度然後將其設置回默認（0）
7. 設置元件文本到當前字

---

現在，如果你希望它是隨機的，然後它是略有不同

__ 下面是一個例子 __

var words = ['hello world', 'foo bar', 'john smith', 'my name'], // 1 
    element = document.body, // 2 
    currentWord = 0; // 3 

var getRandom = function() { // 4 
    return parseInt(Math.random()*words.length); // 5 
}; // -- 4 


window.setInterval(function(){ // 6 
    var newWord = getRandom(); // 7 
    while(newWord === currentWord) newWord = getRandom(); // 8 
    currentWord = newWord; // 9 
    element.textContent = words[currentWord]; // 10 
}, 5000); // -- 6 

---

JSFiddle Demo Link

---

步驟

1. 這只是一個詞
2. 的話將進入
3. 當前詞的索引元素的數組。
4. 創建一個函數返回一個隨機數
5. 獲取一個隨機數&次是由單詞Array的長度解析它。
6. 創建循環每500ms（5秒）
7. 創建包含新字索引
8. 變量的函數如果newWord數量是一樣的currentWord然後嘗試另一個隨機數
9. 設置currentWord newWord
的價值
10. 設置文本元素的新詞