可以讓網頁標題一次又一次地改變

假設我有一個標題爲「你好，我是一個標題」的網頁，但在頁面加載5秒後，它變成「你好，我是另一個標題」，然後5秒之後，它變成了「我也是一個頭銜」，然後這種事情一再發生。請某人請指導我如何做到這一點。我從w3schools.com上了一些在線教程。我真的想這樣做，但我甚至不知道從哪裏開始。可以讓網頁標題一次又一次地改變

來源

2016-10-22 Usman Sikander

我在http://www.legworkstudio.com/ –

上看到過這種情況，你需要有一個後臺進程，每5秒調用一次標題改變fn。將迭代器編號存儲在變量中，並將所有可能的標題存儲在數組中。新的標題將是'數組[iterator％array.length]' –

我會apreeciate如果你想輸入一個簡短的例子 –

您可以使用類似setInterval()的東西，並結合設置document.title。

要動態更改標題，請創建一個字符串消息數組（請參閱Arrays）。在你爲函數setInterval（）編寫的函數中，每次運行時都會得到一個random integer。你可以用它來索引你製作的字符串數組。將該值設置爲document.title。

或者，這裏的一些快速的演示代碼，讓你去：

<html> 
    <script type="text/javascript"> 
     messages = [ "one", "two", "three" ] 

     function rotateTitle() { 
      index = 0 

      setInterval(function() { 
       if (messages.length == index) { 
        index = 0 
       } 

       document.title = messages[index] 

       index++ 
      }, 5000) 
     } 
    </script> 
<body onLoad="rotateTitle()"> 
</body> 
</html>

來源

2016-10-22 08:48:05 Jameson

thankyou詹姆森，但可以喲顯示是例子。我不是很擅長DOM，但我正在學習 –

var i=0; 
setInterval(function(){ 
    var titles=['Hi everyone', 'Salut tout le monde', 'Cao svima'];//add more titles if you want 
    if(i===titles.length) { 
     i=0; 
    } 
    document.title = titles[i]; 
    i++; 
}, 5000);

來源

2016-10-22 08:51:53

這段代碼的最複雜的部分是用模來得到一個基於titles數組的長度當前迭代。

(ii++ % titles.length)

我們增加迭代ii++然後使用模（餘數），計算出迭代器的當前值。這將允許您根據需要使用盡可能多的標題。

const titles = [ 
 
    'Hi I am a title', 
 
    'Hi I am another title', 
 
    'I am also a title' 
 
] 
 

 
function changeTitles(titles){ 
 
    // save an iterator in a closure 
 
    let ii = 0 
 
    // update is run at the start 
 
    return (function update() { 
 
    // change the title 
 
    document.querySelector('title').textContent = titles[(ii++ % titles.length)] 
 
    // queue the function to be called in 5 seconds 
 
    setTimeout(update, 5000) 
 
    })() 
 
} 
 

 
changeTitles(titles)

來源

2016-10-22 08:53:09 synthet1c

像這樣的事情會爲你工作。

The Demo on Jsfiddle

的HTML（於容貌重裝格：P）

<div id="page_title"></div> 
<br> 
<span id="text-reload">Reload</span>

的JS

// custom jquery plugin loadText() 
    $.fn.loadText = function(textArray, interval) { 
     return this.each(function() { 
      var obj = $(this); 
      obj.fadeOut('slow', function() { 
       var elem = textArray[0]; 
       obj.empty().html(elem); 
       textArray.shift(); 
       textArray.push(elem); 
       obj.fadeIn('fast'); 
      }); 
      timeOut = setTimeout(function(){ obj.loadText(textArray, interval)}, interval); 
      $("#text-reload").click(function(){ 
       if(!obj.is(':animated')) { clearTimeout(timeOut); obj.loadText(textArray, interval);} // animation check prevents "too much recursion" error in jQuery 
      }); 
     }); 
    }; 

    $(document).ready(function() { 
     var helloArray = ["Hi I am a title", "Hi I am another title", "I am also a title", "more", "and more", "and even more", "aloha", "see ya!"]; 
     $('#page_title').loadText(helloArray, 5000); // (array, interval) 
     document.title = $('#page_title').text(); 
    });

來源

2016-10-22 08:56:19

試試這個

<script> 
     var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"]; 
     var N = titleArray.length; 
     var i = 0; 
     setInterval(func,5000); 
     function func(){ 
      if (i == 4) { 
       i = 0; 
      } 
      document.title = titleArray[i]; 
      i++; 
     } 

</script>

來源

2016-10-22 08:59:29

謝謝你這個作品很好，但只有一個問題，它需要5秒的第一個標題出現，直到那時它就像文件/// C：用戶...... .............. –

我剛剛計算出來，我只是在你的腳本上面加上了 TITLE-1，它工作的很好！謝謝rehan可能阿拉祝福你 –

謝謝你:) .ameen。 –

<!DOCTYPE html> 
<html> 
<head> 
    <title>hello</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 
<body> 

<script> 
$(document).ready(function(){ 
    var titles = ['title1', 'title 2', 'title 3']; 

    var timeInterval = 5000; /** interval between each titles **/ 

    exec(); 

    setInterval(function(){ 
     exec(); 
    }, timeInterval * titles.length); 

    function exec(){ 
     $.each(titles, function(k, v){ 
      setTimeout(function(){ 
       $('title').html(v); 
      }, timeInterval * (k + 1)); 
     }); 
    } 

}); 
</script> 
</body> 
</html>

來源

2016-10-22 09:03:41

可以讓網頁標題一次又一次地改變

回答

相關問題