javascript - 如何在标题标签中放置滚动文本？

Question

我想让标题文本可滚动，我让代码在它下面滚动正常，但我输入的文本显示时没有空格，这意味着字符串中的空格不被考虑。

<script type="text/javascript">
    //function for tittle scrolling
    function scrlsts() {
        //var scrltest = " Nature ";
        scrltest=document.title;

        //alert(scrltest);
        scrltest = scrltest.substring(1, scrltest.length) + scrltest.substring(0, 1);

        //alert(scrltest);
        document.title = scrltest;

        setTimeout("scrlsts()", 1000);
    }
    $(document).ready(function() {
        var scrltest = " Nature dff ssfd ";
        document.title=scrltest;
        scrlsts();
    });
</script> 

提前致谢

Answer 1

很久没有做这些了，但这应该可行：

(function titleScroller(text) {
    document.title = text;
    setTimeout(function () {
        titleScroller(text.substr(1) + text.substr(0, 1));
    }, 500);
}(" Nature dff ssfd "));

Answer 2

我制作了一个简单易用的JavaScript 库来完成这项任务。

Answer 3

<script type='text/javascript'> 
title = "Your Title";
position = 0;
function scrolltitle() {
    document.title = title.substring(position, title.length) + title.substring(0, position); 
    position++;
    if (position > title.length) position = 0;
    titleScroll = window.setTimeout(scrolltitle,170);
}
scrolltitle();
</script>

要停止标题滚动，只需运行：

window.clearTimeout(titleScroll);

Answer 4

你可以试试这个：

<script>

    var repeat=0 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
    var title=document.title
    var leng=title.length
    var start=1
    function titlemove() 
    {
        titl=title.substring(start, leng) + title.substring(0, start)
        document.title=titl
        start++
        if (start==leng+1`enter code here`) 
        {
            start=0
            if (repeat==0)
            return
        }
        setTimeout("titlemove()",500)
    }
    if (document.title)
    titlemove()
</script>

Answer 5

I was playing around with the scrolling code found here to scroll a long string of emoji smilies in the document.title tag. I noticed that the first and last emoji characters in the string would sometimes show up as a square question mark error icon.

After some research about the issue, it looks like JavaScript does not deal well with UTF-16 surrogate pairs. I pieced together a working solution, and I thought I should circle back here and share.

A workaround for my broken emoji scroller is to split the long string of emojis into a character array. I then shift the array and join it into a string before updating the document.title.

This StackOverflow question lead me in the right direction: Split JavaScript string into array of codepoints? (taking into account “surrogate pairs” but not “grapheme clusters”)

<script type = "text/javascript">
  var msg =
    "☹️☠️";
  var chars = Array.from(msg);

  function scrollTitle() {
    chars.push(chars.shift());
    document.title = chars.join("");
    window.setTimeout(scrollTitle, 120);
  }

  (function() {
    scrollTitle();
  })();
</script>