Question

我一直在寻找一个javascript解释，我如何不断更改我的图标，但我找不到任何东西。

我有6个favicons，我正在尝试按顺序切换以制作动画。我的问题是我需要动态但动态地每隔2秒自动改变一次循环，如ico1，ico2，ico3，ico4，ico5，ico6，ico1，ico2 ......

请参阅this site's Favicon作为示例

有人知道我该怎么办？

Answer 1

考虑使用.gif

值得注意的是some browsers actually support the use of animated .gif images as Favicons，这可能是有利的，而不是使用基于Javascript的解决方案：

Javascript方法和示例

Javascript方法可能涉及将您的图标存储在数组中，并使用setInterval()函数来定义切换它们的时间间隔：

<head>
    <title>Favicon Testing</title>
    <!-- References to switch -->
    <link id="icon-a" rel="shortcut icon" type="image/png" href="http://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-1-icon.png" />
    <link id="icon-b" rel="shortcut icon" type="image/png" href="http://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-1-icon.png" />
    <meta charset="utf-8" />
</head>
<body>
    <script>
        // Store your current icon
        var current = 0;
        var icons = ['http://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-1-icon.png', 'http://hakimuzunyol.orgfree.com/Tugce/assets/icons/twitter_23.png', 'https://upload.wikimedia.org/wikipedia/commons/5/5a/T-bane_3_icon.png'];
        // Every 2 seconds, switch your icon
        setInterval(function () {
            // Determine the next icon
            var icon = (++current % icons.length);
            // Grab the URL to use
            var url = icons[icon];
            // Update your elements
            document.getElementById('icon-a').href = url;
            document.getElementById('icon-b').href = url;
        }, 2000);
    </script>
</body>

Answer 2

您可以通过转换gif来创建动画.ico，或者您可以投入一些javascript来执行此操作。通过js可以找到一些方法：

Changing website favicon dynamically

下次你可能想要发布你尝试过的代码时，这里的人往往会像你的人一样负面地看待开放式的问题。

如何让我的FavIcon不断变化？

2 个答案: