padma colors

ちょっとリニューアルして時計つけた

| 2005年01月03日19:03 | 編集

正月休みを利用して、ちょっとこのサイトをリニューアルしました。　つったって基本的なレイアウトはそのままで、背景色とかをリロード毎に変えたのと、もう一つは時計を付けました。　時計についてはこれまでにこさえたKonfabulatorのWidgetからソースを転用しただけなのですが．．．。

こんな感じのソースで、HTMLとJavaScriptでお手軽に。　後で変更とか出来るように、私のスキルに合わせたソースであります（涙）。　覚え書き程度に以下メモ。

前半はHTMLで、そんなに難しい事はしてません。　取り敢えず画像を配置した、っていう程度です。　あ、そうそう、ここでは読みやすいように改行しておりますが、実際に使用される場合は改行コードを抜いて１行にして下さいね。

imgにname属性を付けて、後で画像を差し替える時の目安にしてます。　ハイフン（h.gif）やコロン（c.gif）、アットマーク（a.gif）は普通に配置しておりまして、残りの０から９迄の画像と共に

http://www.padmacolors.org/pics/gif/

に入れてあります。　が、その０から９迄の画像は、どうせすぐ書き変わりますので画像パスを指定してません（src属性が空になってます）。　ので、ブラウザーによっては描画不具合が生じるかも（ぉぃ）。　尚、パスが相対になっていないのは、どんな階層からでもオッケーにしている為。

後半はJavaScript

num = new Array();
for(i=0;i<=9;i++){
num[i]=new Image();
num[i].src="http://www.padmacolors.org/pics/gif/"+i+".gif";
}

配列をこさえて、先に書いた０から９迄の画像をセットします。

function InternetTime(){

ファンクションで構築するのは、後で１秒毎に呼び出す為。

itime = new Date();

現在の日付時刻を呼び出します。　そして月日時分秒毎にこの後分けます。

timeM = itime.getMonth() + 1;
if (timeM<10) {timeM="0"+timeM};
M=new String(timeM);
document.m1.src=num[M.charAt(0)].src;
document.m2.src=num[M.charAt(1)].src;

getMonthで月情報を獲得するのですが、これって返って来るのは０から１１迄なので、１を足して１から１２（月）としてます。　２行目、返ってきた数値が１桁の場合、先頭に０を足して、例えば５時の場合「０５」とします。　３行目で文字列に。　４行目で月の２桁目を、５行目で１桁目を表示します。

timeD = itime.getDate();
if (timeD<10) {timeD="0"+timeD};
D=new String(timeD);
document.d1.src=num[D.charAt(0)].src;
document.d2.src=num[D.charAt(1)].src;

日も、

timeH = itime.getHours();
if (timeH<10) {timeH="0"+timeM};
H=new String(timeH);
document.h1.src=num[H.charAt(0)].src;
document.h2.src=num[H.charAt(1)].src;

時も、

timeMM = itime.getMinutes();
if (timeMM<10) {timeMM="0"+timeMM};
MM=new String(timeMM);
document.mm1.src=num[MM.charAt(0)].src;
document.mm2.src=num[MM.charAt(1)].src;

分も、

timeS = itime.getSeconds();
if (timeS<10) {timeS="0"+timeS};
S=new String(timeS);
document.s1.src=num[S.charAt(0)].src;
document.s2.src=num[S.charAt(1)].src;

秒も同じ感じで。　そしてインターネットタイムの表示に続きます。

itimes = (itime.getUTCHours() * 3600) + (itime.getUTCMinutes() * 60)
+ itime.getUTCSeconds() + 3600;

標準時間っていうか世界協定時間を獲得します。　全て秒に換算し直しますので時なら3600倍、分なら60倍にします。　最後で3600秒（１時間）を足しているのは、インターネットタイムのSwatchがあるカナダに合わせる為。　この合計秒数をitimesに入れます。

itimes = Math.floor(itimes/86.4);

インターネットタイムは１日を1000で割りますので、24*3600/1000=86.4で割ればオッケー。　割った結果を整数化しておきます。

if (itimes > 1000) {itimes -= 1000;}
if (itimes < 0) {itimes += 1000;}

計測時刻によっては1000を越えたり0を割ったりしますので、ここで調整します。

if (itimes < 10) {itimes ="0"+itimes;}
if (itimes < 100) {itimes ="0"+itimes;}

ここは桁合わせ。　結果的に３桁にします。　尚、1000は0です。

II = new String(itimes);
document.i1.src=num[II.charAt(0)].src;
document.i2.src=num[II.charAt(1)].src;
document.i3.src=num[II.charAt(2)].src;

指定された場所に表示させます。

setTimeout("InternetTime()",1000);
}

１秒毎に時刻を呼び出して再描画させます。　そしてファンクションを閉じます。　ここまでで一括り。

InternetTime();
</script>

初回呼び出しはここで行います。　そしてJavaScriptの終了を宣言。

結構いい加減に作ったので自信はありませんが、これでいいんじゃないかと思われます。

Next Entry (Metalアピアランス上でのシートダイアログのスリット) »

Search

Contact

■Administrator
padmacolors@gmail.com

■Akane Miyashita
akane.padma@gmail.com
イラスト、デザインのお仕事を承ります！

padma colors

ちょっとリニューアルして時計つけた

Search

Archives

Contact