2016-10-22 2 views
4

Предположим, у меня есть веб-страница с заголовком «Привет, я заглавие», но через 5 секунд после загрузки страницы она становится «Привет, я еще один заголовок», а затем 5 секунд после этого он становится «Я тоже титул», и это происходит снова и снова. Может кто-то, пожалуйста, назовите меня, как это сделать. Я взял некоторые онлайн-уроки из w3schools.com. Я действительно хочу это сделать, но я даже не знаю, с чего начать.может изменить название веб-страницы снова и снова

+0

Я видел это на http://www.legworkstudio.com/ –

+0

, вам нужно иметь фоновый процесс, который вызывает изменение названия fn каждые 5 секунд. хранить номер итератора в переменной и все возможные заголовки в массиве. новый заголовок для получения будет 'array [iterator% array.length]' –

+0

Я бы apreeciate, если бы вы набрали короткий пример –

ответ

0

Вы можете использовать что-то вроде 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> 
+0

thankyou Jameson, но можете показать пример. Я не очень хорош в DOM, но я учусь –

2
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)

0

Что-то, как это будет работать для вас.

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(); 
    }); 
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> 
+0

спасибо, что это работает отлично, но только одна проблема занимает 5 секунд, чтобы первый заголовок появлялся до тех пор, пока он не похож на файл /// C: User ...... .............. –

+1

Я просто понял, что просто добавил TITLE-1 над вашим скриптом, и это сработало !!! Спасибо, рехан, может, Аллах благословит тебя –

+0

поблагодарить у :) .ameen. –

0
<!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> 
Смежные вопросы