logo标签列表

可以让网页标题不断更改吗？

javascriptjquerytitletitlebarpage-title
4
假设我有一个网页，标题为“Hi I am a title”，但加载后5秒钟后变成“Hi I am another title”，再过5秒钟后又变成“I am also a title”，这一过程不断重复。能否请有经验的人指导我如何实现这一效果？我在w3schools.com上学习了一些在线教程，但我甚至不知道从哪里开始。
我在http://www.legworkstudio.com/上看到过这种情况发生。 - Usman Sikander
你需要一个后台进程每5秒钟调用标题更改函数。在一个变量中存储迭代器号码和所有可能的标题数组。新的标题为 array[iterator%array.length]。 - Mike B
如果您能够键入一个简短的例子，我将不胜感激。 - Usman Sikander
是的，但请不要这样做。 - 2540625
6个回答
4
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);
2
这段代码最复杂的部分是使用模运算来获取基于 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)

1
<!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>
0
你可以使用类似于setInterval()的方法，结合设置document.title。
为了动态更改标题，创建一个字符串消息数组（参见Arrays）。在 setInterval() 函数中编写的函数内部，每次运行获取一个随机整数。您可以使用它来索引您制作的字符串数组。将该值设置为 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>
谢谢Jameson，但你能给我一个例子吗？我不太擅长DOM，但我正在学习。 - Usman Sikander
0

这样的代码对你有用。

Jsfiddle上的演示

HTML代码（重新加载div以查看效果: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();
    });
0

试一下这个

<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>
谢谢，这个很好用，但是有一个问题，第一个标题需要5秒才能出现，之前会显示“file///C:User....................” - Usman Sikander
1
我刚刚想到了，我只是在你的脚本上面添加了<title>TITLE-1</title>，它就可以工作了!!! 谢谢Rehan，愿真主保佑你。 - Usman Sikander
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接