如何使用JavaScript在title标签内创建文本？

Question

如何在标题中显示滚动(移动)消息？

 <title>Welcome to Some title</title>

将标题栏翻译成动态,使用JavaScript(不带任何CSS)显示其他信息.

Answer 1

您可以通过JavaScript在标题栏文本中添加marque.在博客文章中添加滚动选框效果文本到标题栏.

该页面的未修改内容,格式除外:

/*
    Now you can add moving text to title bar of browser for your website or blog.
    Here is the code to do this. Add this code in your website or blog in a widget
    (after replacing YOUR TEXT with your desired text).
*/

<script language=javascript>
    var rev = "fwd";
    function titlebar(val){
        var msg  = "YOUR TEXT";
        var res = " ";
        var speed = 100;
        var pos = val;
        msg = "   |-"+msg+"-|";
        var le = msg.length;
        if(rev == "fwd"){
            if(pos < le){
                pos = pos+1;
                scroll = msg.substr(0,pos);
                document.title = scroll;
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
            else {
                rev = "bwd";
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
        }
        else {
            if(pos > 0) {
                pos = pos-1;
                var ale = le-pos;
                scrol = msg.substr(ale,le);
                document.title = scrol;
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
            else {
                rev = "fwd";
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
        }
    }
    titlebar(0);
</script>

Answer 2

这是一个引人注目的示例，当您的网页选项卡在浏览器中未处于活动状态时（onblur），可以让您的访问者返回。This script will animate the original title text with an intro, the original title text is restored when the tab is returned to active state (focus). 单击该选项卡时，将恢复原始页面标题。对于社交媒体共享，强烈建议将原始页面标题文本与前言动画文本 (onblur) 一起包含在内。

$(function() {

var origTitle, animatedTitle, timer;

function animateTitle(newTitle) {
  var currentState = false;
  origTitle = document.title;  // save original title
  animatedTitle = "Hey There! " + origTitle;
  timer = setInterval(startAnimation, 2000);

  function startAnimation() {
    // animate between the original and the new title
    document.title = currentState ? origTitle : animatedTitle;
    currentState = !currentState;
  }
}

function restoreTitle() {
  clearInterval(timer);
  document.title = origTitle; // restore original title
}

// Change page title on blur
$(window).blur(function() {
    animateTitle();
});

// Change page title back on focus
$(window).focus(function() {
    restoreTitle();
});

});

Answer 3

这是另一张。但只能继续...\n使用：链接到文件并编写这行代码

\n\n

var title = new MovingTitle("Desired title... ", 300, 10);\ntitle.init();\n

\n\n

第一个参数是所需的文本，下一个参数是更新间隔，10 是可见字母的数量...

\n\n

function MovingTitle(writeText, interval, visibleLetters)\xc2\xa0{\n    var _instance = {};\n\n    var _currId = 0;\n    var _numberOfLetters = writeText.length;\n\n    function updateTitle() {\n        _currId += 1;\n        if(_currId > _numberOfLetters - 1) {\n            _currId = 0; \n        }\n\n        var startId = _currId;\n        var endId = startId + visibleLetters;\n        var finalText;\n        if(endId < _numberOfLetters - 1) {\n            finalText = writeText.substring(startId, endId);\n        } else {\n            var cappedEndId = _numberOfLetters;\n            endId = endId - cappedEndId;\n\n            finalText = writeText.substring(startId, cappedEndId) +     writeText.substring(0, endId);\n        }\n\n        document.title = finalText; \n    }\n\n    _instance.init = function()\xc2\xa0{\n        setInterval(updateTitle, interval);\n    };\n\n    return _instance;\n}\n

\n