WordPress日本語2.5 memo

5・6年生にもわかるやさしいJavaScriptの「日付入りの時計を表示させよう」からコードを戴いて来ました。

JavaScriptは外部ファイルにして他のサイトでも使い回しが出来るように以下のコードの黒い文字部分のみをテキストエディターにコピペし適当な名前を付け拡張子を.js（僕の場合はdatetime.jsとしました。）としてデスクトップに保存それをサイトの適当な位置にアップロードします。

<!–今日の日付と時刻のJavaScriptここから –>
<script language="JavaScript">
<!–
function Clock3(){
myDate=new Date();
myyear=myDate.getFullYear()-1988;
mymonth=myDate.getMonth()+1;
myday=myDate.getDate();
myhour=myDate.getHours();
myminute=myDate.getMinutes();
mysecond=myDate.getSeconds();
if (myhour<10) {myhour="0"+myhour}
if (myminute<10) {myminute="0"+myminute}
if (mysecond<10) {mysecond="0"+mysecond}
document.myform3.myclock3.value="平成 "+myyear+"年"+mymonth+"月"+myday+"日"+myhour+"時"+myminute+"分"+mysecond+"秒";
setTimeout("Clock3()",1000);
}
//–>
</script>
<!–今日の日付と時刻のJavaScriptここまで –>

僕の場合平成の年号を使用したかったので青い部分を追加修正しました。

HTMLソースの時計を表示させたい場所の HEAD区間又はBODY区間に以下のJavaScriptを呼び出すScriptを記述します。

<script type="text/javascript" src="http://JavaScriptを設置した場所のURL/datetime.js"></script>

HTMLソースの時計を表示させたい場所の BODY区間に以下を貼り付けます。

<form name="myform3">
<input name="myclock3" size="25" style="background-color: #7896aa; color: #fff; font-weight: bold; border:0px #f00 solid;" >
</form>
<script language="JavaScript">
<!–
Clock3();
//–>
</script>

青く表示されている部分は表示される文字の色、背景色、文字の太さなどの指定部分です。
僕の場合は背景色をヘッダーと同じ色に文字色は白にしています。

当サイトの場合直接このブログに記述するとValidにならないために静的ページを作成し、objectを使用してヘッダーに設置しています。