javascript - 用户选择另一个选项卡,页面标题每 8 秒更改为不同的标题

标签 javascript jquery html css

我正在尝试根据计时器更改选项卡的标题。

我在网上找到了一个例子,但是无法运行,我也不知道它是否支持多个页面标题。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.
min.js"> 
</script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="Script.js"></script>

</head>
<body>
</body>
</html>

$(function() {

    var origTitle, animatedTitle, timer;

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

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

最佳答案

这是一个每 8 秒更改一次标题的示例。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <script>
        var counter = 0;
        setInterval( function () {
            counter = counter + 1;
            document.title = "Iteration: " + counter;
        }, 8000 );
    </script>
</body>
</html>

为了在 Script.js 文件中与 jQuery 结合使用,您可能希望将其全部包装在 $(document).ready( function() {...} );

更新
下面是每 8 秒显示一个不同名称的示例。

<!DOCTYPE html>
<html>

<head>
    <title>Hello there!</title>
</head>

<body>
    <script>
        var names = [ "Rick", "Michonne", "Darryl", "Rosita", "Negan" ];
        var counter = 0;
        setInterval( function () {
            document.title = "Hello " + names[ counter ];
            if ( counter == names.length - 1 ) {
                counter = 0;
            } else {
                counter = counter + 1;
            }
        }, 8000 );
    </script>
</body>

</html>

关于javascript - 用户选择另一个选项卡,页面标题每 8 秒更改为不同的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49487682/

相关文章:

javascript - 如何在单击按钮后添加新行,html jquery

javascript - 检查字符串中的空格

jquery - 简单的 jquery (DOM).click() 函数不起作用

html - 我有一个 div,它使用了另一个 div 的所有特征,除了一个。使用 scss,我可以使用任何继承吗?

javascript - 在 Angular 中使用 Controller

javascript - 尝试包含 angular.min.js 文件时出现 404 错误

c# - 如何通过 ID 向 signalR 特定的 PersistentConnection 发送消息? (使用 asp.net mvc4 web-api)

javascript - 从 div 中获取数据并将其写入文本文件

javascript - jQuery UI 自动完成 - 访问 JSON 中的嵌套对象

html - 将响应式 css 菜单对齐到中间而不改变它的移动分辨率