時計を複数表示する場合

解決済

質問者：yop_ikunan
質問日時：2009/07/23 12:21
回答数：3件

JavascriptのsetTimeoutを使用して、時計を表示させる事はできます。

世界時計など複数の時計を表示する場合、
あらかじめ決まった数を決まった場所（テキストボックス等）に表示するなら、１つのfunctionをsetTimeoutで制御すればいいですが、
複数（画面にて選択）の都市の時計をレイヤーで都市の下に表示させたいのですが、制御するfunctionを１つで行うことはできるのでしょうか？

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： nobuoka
回答日時：2009/07/23 17:39

何か知りたいことがあるならば、何を知りたいのか明確にすべきかと。

あなたの質問からは「1 つの関数から複数の element 型オブジェクトを操作できるのかどうかわかっていない」ということと何がしたいのかはわかりますが、どこで行き詰っているのかわかりません。

以下、複数の element 型オブジェクトを 1 つの関数から操作するサンプルです。この回答欄で書いただけでテストしていないので変なところがあれば適当に直してください。

// 対象の element 型オブジェクト (div 要素とか) の配列を取得
// getTargets 関数は自分で適当に作ってください
var targets = getTargets();
// sample 関数を実行したら, その中で複数の element 型オブジェクトを操作する
var sample = (function( aTargets ) {
// aTargets は element 型オブジェクトの配列
var targets = aTargets;
return function() {
// 全ての target に処理を行う
for( var i = 0; i < targets.length; i++ ) {
// 子ノードの削除
while( targets[i].childNodes > 0 ) {
targets[i].removeChild( targets[i].firstChild );
}
// 時刻をテキストノードで追加
// getCTime は時刻を取得する関数. 自分で作ってください
targets[i].appendChild( document.createTextNode( getCTime(targets[i]) ) );
}
};
})(targets);

- 0
- 件

通報する

この回答へのお礼

不明確な質問に丁寧に回答して頂き、ありがとうございました。

参考にさせて頂きます。

テストには数日かかりますので、質問のクローズそれ以降になります。

通報する

お礼日時：2009/07/24 00:13

No.3

回答者： fujillin
回答日時：2009/07/23 19:32

＞複数（画面にて選択）の都市の時計をレイヤーで都市の下に表示させ

＞たいのですが、制御するfunctionを１つで行うことはできるのでしょうか？
できるでしょう。

＞何かサンプルがあると非常に参考になるのですが。
どの様な方法でやりたいのか提示されていないので、不明なのでサンプルもにしにくいけど、適当にやればこんな感じ？

配列（ハッシュ）に時差データをいれておいて、現地時間から時差で計算する方法にしてます。
あくまでも、「1つのfunctionで複数の表示をする」方法の一例です。
（setTimeoutではなくsetIntervalを使ってます）
要素数も配列の数に応じて変化するのでしょうから、表示のための要素の作成もスクリプトで行うと想定して、サンプルなので最低限の作成をしてます。時間表示は、その作成された要素数に対してループしている。

でも、時計表示部分を作るよりも、前半のインターフェースの方が面倒だと思うけど…？（そこは質問の対象では無いようなので省略）

<html>
<head>
<style type="text/css">
#clock div {padding:10px;}
#clock div span {font-weight: bold;}
</style>
<script type="text/javascript">
var clocks = {
'time1':0,
'time2':1,
'time3':-8
};
window.onload = function(){
var k, e, t, i=1, cl = document.getElementById('clock');
for (k in clocks) {
e = document.createElement('DIV');
e.title = k;
t = '時計表示' + (i++) + '（時差' + clocks[k] + '時間）: ';
e.appendChild(document.createTextNode(t));
e.appendChild(document.createElement('SPAN'));
cl.appendChild(e);
}
setInterval(timeDisplayer, 500);
}
function timeDisplayer() {
var cl, i, tmp;
cl = document.getElementById('clock').getElementsByTagName('DIV');
for (i=0; i<cl.length; i++){
tmp = new Date();
tmp.setMilliseconds(clocks[cl[i].title]*60*60*1000);
cl[i].getElementsByTagName('SPAN')[0].innerHTML = tmp.getHours()+':'+tmp.getMinutes()+':'+tmp.getSeconds();
}
}
</script>
</head>

<body>
<div id="clock"></div>
</body>
</html>