JavaScriptのサンプル

動く時計を表示するスクリプトです。（時間のみを表示・フォーマットを変更できるタイプ）

パターン1
パターン2

コード

<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--

function disp(){

	var now = new Date();

	var hour = now.getHours(); // 時
	var min = now.getMinutes(); // 分
	var sec = now.getSeconds(); // 秒

	// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
	if(hour < 10) { hour = "0" + hour; }
	if(min < 10) { min = "0" + min; }
	if(sec < 10) { sec = "0" + sec; }

	// フォーマットを指定（不要な行を削除する）
	var watch1 = hour + ':' + min + ':' + sec; // パターン1
	var watch2 = hour + '時' + min + '分' + sec + '秒'; // パターン2

	// テキストフィールドにデータを渡す処理（不要な行を削除する）
	document.form1.field1.value = watch1; // パターン1
	document.form1.field2.value = watch2; // パターン2

	setTimeout("disp()", 1000);

}

// -->
</script>

</head>
<body onLoad="disp()">

<form action="#" name="form1">
<input type="text" name="field1" size="8"> パターン1<br>
<input type="text" name="field2" size="15"> パターン2
</form>

</body>
</html>

解説

<head> ～ </head> 内にスクリプトを記述しておき、フォームのテキストフィールド内に時間を表示します。

上記例では、コロン（ : ）で区切ったタイプと時分秒を付けたタイプを表示していますので、不要な方の行を削除してください。

ページを表示したときに自動的に時計を動かすので、bodyタグに onLoad="disp()" を指定しています。

青い文字の部分は、必要に応じて書き換えてください。

ボタンのクリックで時計を動かす場合は、bodyタグの onLoad="disp()" を削除して、フォームの部分を以下のサンプルのように指定します。

サンプル

<form action="#" name="form1">
<input type="text" name="field1" size="8">
<input type="button" value="動かす" onClick="disp()">
</form>
表示例