jQueryプラグインでおしゃれな文字時計を作れる「jQuery-WordClock」

jQueryプラグインでおしゃれな文字時計を作れる「jQuery-WordClock」サンプル もしかしたらどこかで使えるかもしれないおしゃれ時計を設置できるjQueryプラグインLoonyPandora/jQuery-WordClockです。
なんとこのプラグインを使うと現在の時刻を文字で教えてくれるのです。
おしゃれですね!?

使用方法 LoonyPandora/jQuery-WordClockからファイルをダウンロード。
設置は簡単。
まずはJavaScriptを下記のように記述します。
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.wordclock.js"></script>
<script type="text/javascript">
$(function () {
$('#my-clock').wordclock();
});
</script>
で、表示させたい位置に下記のように。
<div id="my-clock"></div>
最後に表示をCSSで調整します。
/* 時計の文字 */
#my-clock p {
font-size: 20px;
line-height: 1.2em;
display: inline;
letter-spacing: -1px;
color: #666;
font-family:Helvetica, 'Lucida Grande';
}
/* 現在時刻の文字 */
#my-clock .current {
color: #f33;
background: #000;
font-weight: bold;
}

js内変えれば日本語表記もできそうですね。

jQueryプラグインでおしゃれな文字時計を作れる「jQuery-WordClock」サンプル

sponsors

「jQueryプラグインでおしゃれな文字時計を作れる「jQuery-WordClock」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryプラグインでおしゃれな文字時計を作れる「jQuery-WordClock」