戻るリアルタイムに時刻・日付を表示する |
◆リアルタイムに時刻・日付を表示する◆ |
■■１■■
[概要]
ステータスバーにリアルタイムに時刻を表示
[参照]
メルマガ Vol.13
[ソース]
<HTML>
<HEAD>
<TITLE>時刻表示</TITLE>
<SCRIPT language="JavaScript">
<!--
setInterval('status=Date()',1000);
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
※赤は変更点
■■２■■
[概要]
テキストボックスにリアルタイムに時刻を表示
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>時刻表示</TITLE>
<SCRIPT language="JavaScript">
<!--
setInterval('document.form1.box1.value=Date()',1000);
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="box1" SIZE="20">
</FORM>
</BODY>
</HTML>
※赤は変更点
■■３■■
[概要]
ステータスバーにリアルタイムに時刻を日本語で表示
[参照]
メルマガ Vol.13
[ソース]
<HTML>
<HEAD>
<TITLE>時刻表示</TITLE>
<SCRIPT language="JavaScript">
<!--
function getTime(){
//時刻の初期設定
today = new Date();
year = today.getYear();
month = today.getMonth();
date = today.getDate();
youbi = today.getDay();
hours = today.getHours();
minutes = today.getMinutes();
seconds = today.getSeconds();
day = new Array("日","月","火","水","木","金","土");
//時刻表示
status=year+"年"+month+"月"+date+"日"+"("+day[youbi]+")"+hours+"時"+minutes+"分"+seconds+"秒";
}
//-->
</SCRIPT>
<!--時刻表示-->
<SCRIPT language="JavaScript">
<!--
setInterval('getTime()',1000);
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
※赤は変更点
※緑はコメントそのまま貼り付けても大丈夫
■■４■■
[概要]
テキストボックスにリアルタイムに時刻を表示
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>時刻表示</TITLE>
<SCRIPT language="JavaScript">
<!--
function getTime(){
//時刻の初期設定
today = new Date();
year = today.getYear();
month = today.getMonth()+1;
date = today.getDate();
youbi = today.getDay();
hours = today.getHours();
minutes = today.getMinutes();
seconds = today.getSeconds();
day = new Array("日","月","火","水","木","金","土");
//時刻表示
document.form1.box1.value=year+"年"+month+"月"+date+"日"+"("+day[youbi]+")"+hours+"時"+minutes+"分"+seconds+"秒";
}
//-->
</SCRIPT>
<!--時刻表示-->
<SCRIPT language="JavaScript">
<!--
setInterval('getTime()',1000);
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="box1" SIZE="40">
</FORM>
</BODY>
</HTML>
※赤は変更点
※緑はコメントそのまま貼り付けても大丈夫
■■５■■
[概要]
リアルタイムに時刻を画像表示
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>時間の画像表示</TITLE>
<SCRIPT language="JavaScript">
<!--
/*画像のプレロード*/
hour_i = new Array();
week_i = new Array();
//画像用フォルダ
var img_f = "number";
hour_i[0] = new Image();
hour_i[1] = new Image();
hour_i[2] = new Image();
hour_i[3] = new Image();
hour_i[4] = new Image();
hour_i[5] = new Image();
hour_i[6] = new Image();
hour_i[7] = new Image();
hour_i[8] = new Image();
hour_i[9] = new Image();
//画像をセット
hour_i[0].src = "./"+img_f+"/0.gif";
hour_i[1].src = "./"+img_f+"/1.gif";
hour_i[2].src = "./"+img_f+"/2.gif";
hour_i[3].src = "./"+img_f+"/3.gif";
hour_i[4].src = "./"+img_f+"/4.gif";
hour_i[5].src = "./"+img_f+"/5.gif";
hour_i[6].src = "./"+img_f+"/6.gif";
hour_i[7].src = "./"+img_f+"/7.gif";
hour_i[8].src = "./"+img_f+"/8.gif";
hour_i[9].src = "./"+img_f+"/9.gif";
//時間を取得
function getTime(){
today = new Date();
hour = new String(today.getHours());
hour = setString(hour);
minute = new String(today.getMinutes());
minute = setString(minute);
sec = new String(today.getSeconds());
sec = setString(sec);
putImg();
}
//２桁にする
function setString(num){
if(eval(num)<10){
num = "0"+ num;
}
return num;
}
//画像をセット
function putImg(){
document.hour1.src = hour_i[hour.charAt(0)].src;
document.hour2.src = hour_i[hour.charAt(1)].src;
document.minute1.src = hour_i[minute.charAt(0)].src;
document.minute2.src = hour_i[minute.charAt(1)].src;
document.sec1.src = hour_i[sec.charAt(0)].src;
document.sec2.src = hour_i[sec.charAt(1)].src;
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="setInterval('getTime()',1000);">
<p>
<img src="./number/0.gif" name="hour1">
<img src="./number/0.gif" name="hour2">
時
<img src="./number/0.gif" name="minute1">
<img src="./number/0.gif" name="minute2">
分
<img src="./number/0.gif" name="sec1">
<img src="./number/0.gif" name="sec2">
秒
</BODY>
</HTML>
※赤は変更点
※緑はコメントそのまま貼り付けても大丈夫
※数字・曜日画像は素材集から取ってください