skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

スタイリッシュなデジタル時計を作るJavaScript「jDigiClock」

｜ ｜ ｜ ｜ ｜ ｜ ｜

サイトに時計を表示したい人はjQueryプラグインの「jDigiClock」を使用すれば、スタイリッシュで印象的なものが導入できます。
しかも天気だって出ます・・・。

使用方法
jDigiClockからファイル一式をダウンロードします。
<link rel="stylesheet" type="text/css" href="jquery.jdigiclock.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jdigiclock.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').jdigiclock({
clockImagesPath: 'clockまでの画像パス/clock/',
weatherImagesPath: 'weatherまでの画像パス/weather/',
am_pm: true, //午前午後表記をするかどうか
weatherLocationCode: 'ASI|JP|JA041|TOKYO', //天気予報の場所指定
//ここ見るWeatherLocationDatabase
});
});
</script>

あとはidを付与すれば完成です。
<div id="id名"></div>
天気が出ない場合はproxy.phpをアップロードしているかどうか、jquery.jdigiclock.jsの225行目のproxy.phpへのパスがあっているかをご確認ください。
スタイリッシュなデジタル時計を作るJavaScript「jDigiClock」サンプル

記事作成：2009年12月03日

前の記事：JavaScriptで要素をスライドさせる「bxSlider jQuery content slider 」
次の記事：要素をスライドさせていくカルーセル JavaScript「jQuery carrousel」