リアルタイムで時間表示 [JavaScript]
時間をリアルタイムで表示する Javascript です。
時間と分を取得して、表示する文字列を作成し、id="rtClock" に表示します。
リアルタイムで表示を更新するために、setInterval() で１秒ごとに showTime() を実行しています。
JavaScript なので、ローカルのパソコンの時間設定を取得しています。
パソコンの時間設定が狂っていると、そのまま表示します。
時間表示のカスタマイズは、いろいろ考えられます。
このままだと動いているか分かりづらいので、秒を取得して、１秒ごとに点滅させることも考えられます。
表示桁数を２桁に固定して、1時5分 を 01時05分 してもいいかもしれません。
２４時間表示ではなく、AM/PM 表示の方が見やすいという人もいると思います。
このサンプルはテキスト表示なので、数字の画像を作って、画像で表示すると時計らしくなります。
画像は、毎回読み込んでいるとアクセスに時間がかかるので、起動時にまとめて読み込むなどの工夫が必要になります。
<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示</title>
<script type="text/javascript"><!--
function showTime(){
var jikan = new Date();
var nowHour = jikan.getHours();
var nowMin = jikan.getMinutes();
document.getElementById("rtClock").innerHTML = nowHour + "時" + nowMin + "分";
}
setInterval('showTime()',1000);
// --></script>
</head>
<body>
<div id="rtClock"></div>
</body></html>
時間と分を取得して、表示する文字列を作成し、id="rtClock" に表示します。
リアルタイムで表示を更新するために、setInterval() で１秒ごとに showTime() を実行しています。
JavaScript なので、ローカルのパソコンの時間設定を取得しています。
パソコンの時間設定が狂っていると、そのまま表示します。
時間表示のカスタマイズは、いろいろ考えられます。
このままだと動いているか分かりづらいので、秒を取得して、１秒ごとに点滅させることも考えられます。
表示桁数を２桁に固定して、1時5分 を 01時05分 してもいいかもしれません。
２４時間表示ではなく、AM/PM 表示の方が見やすいという人もいると思います。
<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示2</title>
<script type="text/javascript"><!--
// 桁数が1桁だったら先頭に0を加えて2桁にする
function set2figures(num){
var ret;
if(num<10){
ret = "0" + num;
}else{
ret = num;
}
return ret;
}
// AM/PMと12時間表示
function setAMPM(hour){
var ampm;
var ret;
if(hour < 12){
ret = "AM " + set2figures(hour);
}else{
ret = "PM " + set2figures(hour-12);
}
return ret;
}
// 秒ごとに点滅
function setFlash(sec){
var cnt = sec % 2;
var ret;
if(cnt != 0){ // 奇数
ret = "+";
}else{ // 偶数
ret = "*";
}
return ret;
}
function showTime(){
var jikan = new Date();
var nowHour = setAMPM(jikan.getHours());
var nowMin = set2figures(jikan.getMinutes());
var nowsec = setFlash(jikan.getSeconds());
document.getElementById("rtClock").innerHTML = nowsec + nowHour + ":" + nowMin;
}
setInterval('showTime()',1000);
// --></script>
</head>
<body>
<div id="rtClock"></div>
</body></html>このサンプルはテキスト表示なので、数字の画像を作って、画像で表示すると時計らしくなります。
画像は、毎回読み込んでいるとアクセスに時間がかかるので、起動時にまとめて読み込むなどの工夫が必要になります。
コメント 0