Question

我正在尝试运行一些代码，每秒钟无限期地在2 .ico之间来回闪烁。到目前为止，我已经有了这个代码，它改变了一次，但不是一次;

var favUrl = "favicon.ico";
var flashFavIco = function() {
    if(favUrl == "favicon.ico") {
        favUrl = "favicon-white.ico";
    } else {
        favUrl = "favicon.ico";
    }
    console.log(favUrl);
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.mysite.com/' + favUrl;
    document.getElementsByTagName('head')[0].appendChild(link);
};
setInterval(flashFavIco, 1000);

我测试了在if / else部分添加console.log()以检查每秒都设置favURL，确实是这样。所以我有点担心为什么favicon只改变一次。这是浏览器问题吗？

编辑：我确实意识到这会不断添加新的<link ...标签，而我正在努力编写appendChild部分，这不会影响我的原始问题

Answer 1

我重写了部分内容，现在让它正常工作;

var favUrl = "favicon.ico";
var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.mysite.com/' + favUrl;
    link.id = "favico";
document.getElementsByTagName('head')[0].appendChild(link);

var flashFavIco = function() {
    if(favUrl == "favicon.ico") {
        favUrl = "favicon-white.ico";
    } else {
        favUrl = "favicon.ico";
    }
    $('#favico').prop('href', 'http://www.mysite.com/' + favUrl);
};
setInterval(flashFavIco, 1000);

Answer 2

为你重写了它。

// Edit these
var faviconNormal = "/faviconNormal.ico";
var faviconActive = "/faviconActive.ico";
var faviconID = "#myfavicon"; // CSS selector for your <link> element

// Declarations
var faviconElement = document.querySelector(faviconID);
var faviconIsActive = false;

function flashFavicon() {
    if (faviconIsActive == false) {
        changeFavicon(faviconActive);
        faviconIsActive = true;
    }
    else {
        changeFavicon(faviconNormal);
        faviconIsActive = false;
    }
}

function changeFavicon(src) {
    faviconElement.href = src;
}

// Run
var initFlashing = setInterval(flashFavicon, 1000);

来回闪光图案

2 个答案: