javascript - 样式并在浏览器的标签标题中显示当前日期

Question

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

有人知道我该怎么做吗？

Answer 1

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

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

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

看到这个帖子

Answer 2

通过在头部包含 favicon 链接元素来开始您的文档：

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

“完整”版本是带有 31 的图标。接下来我们将使用 JavaScript 动态创建网站图标。

为动态网站图标使用画布

我们需要以下项目才能使此效果起作用：

一个不必存在于 DOM 中的画布，即 16×16 – 我们的图标大小, 即 04 是第 4 个就是这样。为了方便起见，我在链接元素中添加了一个 id，这样我就可以在图像准备好时更改 href。以下 JavaScript 可以包含在链接元素下方的任何位置：

(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) 将图像绘制到画布上。this 指的是 onload 事件所作用的图像，0, 0 是开始绘制的左上角位置。

接下来我们为文本设置样式并绘制它。

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

你应该可以看到运行在这篇博文上的代码，如果你查看与这个页面相关的图标，它应该是带有正确日期的日历图标，如果你的浏览器支持画布 API（IE8 及以下不支持，所有其他浏览器都这样做）。

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