faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」

ネタ的なJavaScriptですが、どこかで使えそうなので。
faviconをJavaScriptで指定でき、テキストも表示させられるjQuery favicon pluginです。
これを利用するとGoogleカレンダーみたいなアイコンにテキストを表示させられますね。
faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」サンプル

使用方法
jQuery favicon pluginからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.favicon.js"></script>
<script>
$(function(){
jQuery.favicon('画像パス', function (ctx) {
//今日の月を取得
var currentTime = new Date();
var day = currentTime.getDate();

//favicon指定
ctx.font = 'bold 18px "helvetica", sans-serif'; //フォント
ctx.fillStyle = '#FFFFFF'; //カラー
ctx.fillText(day, 5, 27); //左から順に(表示内容,横位置,縦位置)
});
});
</script>

これで完成です。
サポートブラウザはFirefox 3.5, Opera 9, Chrome 4のようです。

faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」サンプル

sponsors

「faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」」をシェアする

記事作成:
記事URL:

TOP > > > faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」