2016-10-22 10 views
4

私はタイトルが「こんにちは私はタイトルですが、ページがロードされてから5秒後には「こんにちは私は別のタイトルです」と5秒後にウェブページがあるとしますその後、それは "私もタイトルです"となり、これは何度も何度も起き続けます。私はw3schools.comからいくつかのオンラインチュートリアルを受けた。私は本当にこれをやりたいと思っていますが、どこから始めたらいいのか分かりません。ウェブページのタイトルを何度も変更することができます

+0

私はこれがhttp://www.legworkstudio.com/ –

+0

で起こっているのを見て、5秒ごとにタイトルをfnに変更するバックグラウンドプロセスを持つ必要があります。変数内のイテレーター番号と配列内のすべての可能なタイトルを格納します。新しいタイトルは 'array [iterator%array.length]' –

+0

となるでしょう。短い例文を入力すれば、 –

答えて

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

は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(ルックスのリロード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> 
+0

これはうまく動作しますが、最初のタイトルが表示されるまで5秒かかります。 .............. –

+1

私はちょうどあなたのスクリプトの上に TITLE-1を追加しました。本当にありがとうございます。アッラーはあなたを祝福するかもしれません。 –

+0

ありがとうございます。 –

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> 
を試してみてください
関連する問題