个人中心
gpt4 book ai didi

javascript - 如何让我的 FavIcon 不断变化？

转载 作者：搜寻专家 更新时间：2023-10-31 22:40:45 24 4
gpt4 key购买 nike

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

我有 6 个网站图标，我正在尝试按顺序切换以制作某种动画。我的问题是我需要图标动态变化，但每 2 秒自动循环变化一次，如 ico1、ico2、ico3、ico4、ico5、ico6、ico1、ico2...

参见 this site's Favicon举个例子

有人知道我该怎么做吗？

最佳答案

考虑使用 .gif

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

enter image description here

Javascript 方法和示例

enter image description here

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>

关于javascript - 如何让我的 FavIcon 不断变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37218633/

24 4 0
文章推荐： php - TCPDF 错误 : Can't open image file:/var/www/html/tcpdf/cache/
文章推荐： php - Laravel 5 邮件队列不工作
文章推荐： php - 如何通过 PHP 向 GMail 发送电子邮件？
文章推荐： php - Laravel 5 表单模型绑定(bind)复选框值
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com