-1

Google カレンダーを開くと、ブラウザ タブのタイトルの左側に現在の日付 (数字) が表示された青い四角形が表示されます。

これを行う方法を知っている人はいますか？

4

2 に答える 2

1

これはファビコンを使用して行われます。私の推測では、彼らは 1 日に 1 つのファビコンを持っており、javascript を使用してファビコンのソースを変更しています。getDay() 関数を使用して、javascript で現在の日付を取得できます。

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

次に、その日を使用してファビコンを選択します。例 day1.ico、...、day31.ico で、ソースを JavaScript で動的に変更します。

この投稿を見る

于 2013-02-04T11:05:20.427 に答える
0

ヘッドにファビコン リンク要素を含めて、ドキュメントを開始します。

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

「完全な」バージョンは、すでに 31 が付いているファビコンです。次に、JavaScript を使用してファビコンを動的に作成します。

動的ファビコンにキャンバスを使用する

この効果を機能させるには、次のアイテムが必要です。

DOM に存在する必要のないキャンバス、つまり 16×16 です – ファビコンのサイズ テンプレートのファビコン画像 一度だけ、テンプレート画像が読み込まれたら、テキストを追加します 2 文字形式の日付、つまり 04 は 4 番目です。便宜上、link 要素に 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 を見ると、ブラウザーがキャンバス API をサポートしている場合 (IE8 以下はサポートしていない場合)、正しい日付のカレンダー アイコンになっているはずです。他のすべてのブラウザーはそうします)。

日付を変更してテストしてみてください。

于 2013-02-04T11:21:21.717 に答える