All geek questions in one place

Can change the name of a webpage over and over again

Suppose I have a web page with the heading “Hello, I am the heading,” but 5 seconds after loading the page it becomes “Hello, I am another heading”, and then after 5 seconds it becomes “I am also the heading”, and then it happens again and again. Can someone please call me how to do this. I took some online lessons from w3schools.com. I really want to do this, but I don’t even know where to start.

+4
source share
6 answers
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
source

modulo titles.

(ii++ % titles.length)

ii++, modulo ( ), . .

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)
Hide result
+2

- 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>
0
source

Something like this will work for you.

Jsfiddle Demo

HTML (reload div for look: 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
source

try it

<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>
0
source 
<!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
source

Source: https://habr.com/ru/post/1658527/

More articles:


All Articles