JavaScriptのサンプル
動く時計を表示するスクリプトです。(時・分・秒を別々のテキストフィールドに表示するタイプ)
コード
<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; }
// テキストフィールドにデータを渡す処理
document.form1.field1.value = hour; // 時
document.form1.field2.value = min; // 分
document.form1.field3.value = sec; // 秒
settimeout("disp()", 1000);
}
// -->
</script>
</head>
<body onLoad="disp()">
<form action="#" name="form1">
<input type="text" name="field1" size="2"> 時
<input type="text" name="field2" size="2"> 分
<input type="text" name="field3" size="2"> 秒
</form>
</body>
</html>
解説
<head>
~ </head>
内にスクリプトを記述しておき、フォームのテキストフィールド内に時間を表示します。
ページを表示したときに自動的に時計を動かすので、bodyタグに onLoad="disp()"
を指定しています。
青い文字の部分は、必要に応じて書き換えてください。
ボタンのクリックで時計を動かす場合は、bodyタグの onLoad="disp()"
を削除して、フォームの部分を以下のサンプルのように指定します。
サンプル
<form action="#" name="form1">
<input type="text" name="field1" size="2"> 時
<input type="text" name="field2" size="2"> 分
<input type="text" name="field3" size="2"> 秒
<input type="button" value="動かす" onClick="disp()">
</form>
- 表示例