Question

如果您打开Google日历，您会看到一个蓝色方块，其中包含浏览器标签标题左侧的当前日期（数字）

有人知道我该怎么做吗？

Answer 1

这是使用favicon完成的。我的猜测是他们每天都有一个图标，他们使用javascript更改图标的来源。您可以使用getDay（）函数在javascript中获取当前日期：

var d = new Date();
var n = d.getDay();

然后使用日期选择图标。例如。 day1.ico，...，day31.ico并使用JavaScript动态更改源

请参阅this post

Answer 2

通过在头部包含favicon链接元素来启动文档：



<link id="favicon" rel="icon" type="image/png" href="ical-icon-complete.png" />

<link id="favicon" rel="icon" type="image/png" href="ical-icon-complete.png" />

“完整”版本是favicon，其上已经有31个。接下来，我们将使用JavaScript动态创建favicon。

使用画布进行动态收藏夹

我们需要以下项目来使这个效果起作用：

不必存在于DOM中的画布，即16×16 - 我们的图标大小模板图标图像一旦，只有一次，模板图像已加载，我们然后添加文本两个字符格式的日期，即04是第4个而已。为了获得一致性，我在链接元素中添加了一个id，这样我就可以在图像准备好时更改href。以下JavaScript可以包含在link元素下方的任何位置：

(function () {
var canvas = document.createElement('canvas'),
ctx,
img = document.createElement('img'),
link = document.getElementById('favicon').cloneNode(true),
day = (new Date).getDate() + '';

if (canvas.getContext) {
canvas.height = canvas.width = 16; // set the size
ctx = canvas.getContext('2d');
img.onload = function () { // once the image has loaded
ctx.drawImage(this, 0, 0);
ctx.font = 'bold 10px "helvetica", sans-serif';
ctx.fillStyle = '#F0EEDD';
if (day.length == 1) day = '0' + day;
ctx.fillText(day, 2, 12);
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);
};
img.src = 'ical-icon.png';
}

})();

重要的部分是代码运行的顺序。它创建一个图像元素，并挂钩onload事件处理程序。当这个onload事件运行时，它使用ctx.drawImage（this，0,0）将图像绘制到画布上。这是指onload事件所作用的图像，0,0是开始绘制的顶部左侧位置。

接下来，我们设置文本样式并将其绘制。

最后使用canvas.toDataURL我们为链接设置了一个新的href。

您应该能够看到此博客文章中运行的代码，如果您查看与此页面关联的favicon，如果您的浏览器支持canvas API（IE8及以下版本，则应该是具有正确日期的日历图标）不，所有其他浏览器都这样做。

尝试更改日期以进行测试。

样式并在浏览器的标题标题中显示当天

2 个答案: