- ベストアンサー
時計を複数表示する場合
JavascriptのsetTimeoutを使用して、時計を表示させる事はできます。 世界時計など複数の時計を表示する場合、 あらかじめ決まった数を決まった場所（テキストボックス等）に表示するなら、１つのfunctionをsetTimeoutで制御すればいいですが、 複数（画面にて選択）の都市の時計をレイヤーで都市の下に表示させたいのですが、制御するfunctionを１つで行うことはできるのでしょうか？ 宜しくお願いします。
- yop_ikunan
- お礼率100% (8/8)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
何か知りたいことがあるならば、何を知りたいのか明確にすべきかと。 あなたの質問からは 「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);
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
＞複数（画面にて選択）の都市の時計をレイヤーで都市の下に表示させ ＞たいのですが、制御する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>
お礼
不明確な質問に丁寧に回答して頂き、ありがとうございました。 参考にさせて頂きます。 テストには数日かかりますので、質問のクローズそれ以降になります。
- nobuoka
- ベストアンサー率69% (23/33)
できますよ。
お礼
nobuoka様 早速の回答ありがとうございます。 何かサンプルがあると非常に参考になるのですが。
お礼
不明確な質問に丁寧に回答して頂き、ありがとうございました。 参考にさせて頂きます。 テストには数日かかりますので、質問のクローズそれ以降になります。