我一直在寻找有关如何不断更改网站图标的JavaScript解释,但是我找不到任何信息。 我有6个网站图标,我试图按顺序将它们切换以形成某种动画效果。我的问题是,我需要这些图标每2秒自动地在循环中动态更改,例如ico1,ico2,ico3,ico4,ico5,ico6,ico1,ico2... 以该网站的Favicon为例。有人有任何想法应该怎么做吗?
考虑使用 .gif
值得注意的是,一些浏览器实际上支持使用动画的 .gif
图片作为网站图标, 这可能比使用基于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>
btn.onclick
,只需将其作为参数传递给 setInterval()
。这样做最省力了。 - Patrick Roberts