• ベストアンサー

時計を複数表示する場合

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

質問者が選んだベストアンサー

  • ベストアンサー
  • nobuoka
  • ベストアンサー率69% (23/33)
回答No.2

何か知りたいことがあるならば、何を知りたいのか明確にすべきかと。 あなたの質問からは 「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);

yop_ikunan
質問者

お礼

不明確な質問に丁寧に回答して頂き、ありがとうございました。 参考にさせて頂きます。 テストには数日かかりますので、質問のクローズそれ以降になります。

その他の回答 (2)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

>複数(画面にて選択)の都市の時計をレイヤーで都市の下に表示させ >たいのですが、制御するfunctionを1つで行うことはできるのでしょうか? できるでしょう。 >何かサンプルがあると非常に参考になるのですが。 どの様な方法でやりたいのか提示されていないので、不明なのでサンプルもにしにくいけど、適当にやればこんな感じ? 配列(ハッシュ)に時差データをいれておいて、現地時間から時差で計算する方法にしてます。 あくまでも、「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>

yop_ikunan
質問者

お礼

不明確な質問に丁寧に回答して頂き、ありがとうございました。 参考にさせて頂きます。 テストには数日かかりますので、質問のクローズそれ以降になります。

  • nobuoka
  • ベストアンサー率69% (23/33)
回答No.1

できますよ。

yop_ikunan
質問者

お礼

nobuoka様 早速の回答ありがとうございます。 何かサンプルがあると非常に参考になるのですが。

関連するQ&A

  • 時計を複数表示する場合について

    先日、同タイトルに回答して頂いた方、ありがとうございました。 質問の内容は不明確で申し訳ありませんでした。 そこで、再度、具体的に質問させて頂きました。 (教えて!gooでの質問は初めてで、質問者単独では書込み追加ができないんですね) 以下のコードで、複数の時計(都市)を表示する場合、 現在は都市の数だけ「function setTime()」を記述しているんですが 1つにまとめる方法があれば、ご教授願います。 ************************ http://www.geocities.jp/yop_ikunana/test22.html ************************

  • クリック→レイヤー→インプット?

    下記のようなことができるシンプルなサンプルを探しています。 <A HREF="javascript:function voi(){};voi()" onClick="hogehoge()">クリック</A> <INPUT TYPE="TEXT" NAME="都市名" SIZE="12"> 上記の「クリック」をクリックすると、windowではなくレイヤー画面が見え、そこに <A HREF="javascript:function voi(){};voi()" onClick="input()">東京</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="input()">大阪</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="input()">京都</A><BR> という内容が表示され、クリックすると、「都市名」のテキストボックスに入る。レイヤーは消える。 クリックするとテキストが入るなどの部分は、私でもできますが、レイヤーをどう表示するかという部分がちんぷんかんぷん。 #レイヤーの説明もちょっとあやしいかもしれません。

  • 「世界天気時計」で複数の都市同時表示方法は?

     auのスマホArrows FJL22で、フリーアプリ「世界天気時計」をDLして使っています。このアプリでは、世界の複数の都市の天気や時間を同時に表示できます。  以前に、このアプリで自宅の地域やニューヨーク、ロンドンなど複数の都市の天気・時間などを表示していたのですが、恥ずかしながら、ちょっと使わないうちに、その表示方法を忘れてしまいました。  ひとつの都市ずつの表示なら、順番にできるのですが、複数の都市の同時表示方法を思い出せません。  auショップで聞きましたら、アプリの事まではわからないといわれました。  どなたかご存知の方、よろしくお願いいたします。

  • アクセスの式ビルダ (一文字だけ選択したいのに複数選択されてしまう。)

    関数を下の様式から選択し 上のテキストボックスに表示させ 値を変えようと思いカーソルを入れたいのですが 文字が複数選択されてしまいます。 これを回避するにはどうすればいいでしょう? よろしくお願いします。

  • ファイルを複数選択して・・・

    ダイアログボックスでファイルを複数選択して、読み込んだ内容をテキストボックスに表示させたいのですが、複数でやるとどうもうまくいきません・・・。 どういうふうにコードを記述すればよいのでしょうか? よろしくお願いします。

  • ラジオボタンでテキストボックスを非アクティブにできる?

    2択のラジオボタンと、テキストボックスが一つあったとして、ラジオボタンの片方を選択しているときは、このテキストボックスを非アクティブ状態にする、といったことはJavascriptで可能でしょうか? あまりJavascriptに詳しくないので、簡単な記述で制御できると助かるのですが・・・。 ご教授、よろしくお願いいたします。

  • NN4とNN6でのレイヤーの表示・非表示

    WINとMACでNN4とNN6でのレイヤーの表示・非表示を制御する、そんな都合の良いJavaScriptってありますか? あったら教えて下さい!!

  • JavaScript-世界時計が表示されない

    Dreamweaverで社内サイトの作成をしています。 世界時計を表示したく、Dreamweaverで新規HTML作成→JavaScriptの記述 を行ったところ正しく表示されましたが、 同じソースをコピーして、担当するトップページ(index.html)に貼り付けたところ、時計だけが表示されません。 <使用ブラウザ:IE6.0.2> これは一体何が原因なのでしょうか? ●index.htmlにテンプレートを使用しているから? ●貼り付けようとする位置に問題がある? ●同じページ内に他のJavascriptを使用しているから? 自分なりに色々調べましたが全く見当がつきませんので、 どなたかご存知の方ご教授いただけますでしょうか。 よろしくお願い致します。 世界時計のJavaScriptソースを参考にしたURL http://www.ueda.info.waseda.ac.jp/~gaku/js/how030.html

  • チェックボックスを選択するとテキストボックスが表示

    質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか? <input type="checkbox" name="example" value="" />テレビ ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />新聞 ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />CM ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />その他 ←チェックしたらテキストボックス表示 色々なJavaScriptを試したのですが、 どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、 という具合になります。 それぞれテキストボックスを表示させたいチェックボックスに 反映できるJavaScriptをご教示願いますでしょうか? 宜しくお願い致します。

  • リストボックスで選択したデータを表示する方法

    ソフトはACCESS2000です。 フォームでの入力で、リストボックスから複数選択できるようにしているのですが、このリストボックスの値集合ソースに入っている件数が多いため、下にかなりスクロールすることになります。 そこで、リストボックスの右側に別にリストボックスで選択したものを表示させられないかと思っています。 ここでお聞きしたいのは、 1. 表示エリアとしてテキストボックスを作ったのですが、テキストボックスでOKか? 2. 1でOKの場合、リストボックスで選択したものをテキストボックスに表示させる方法 3. 1でOKの場合、そのテキストボックスへ入力できなくする方法(表示ONLYにしたい) 4. 1でだめな場合、別な方法はあるか?あればその方法 です。 回答は、1~3か、1,4になるかと思います。よろしくお願いいたします。