リアルタイムな時計表示のsetIntervalについて
- この質問は、リアルタイムに時計を表示するためのJavaScriptコードで、setInterval関数を使用する方法についてのものです。
- 質問者はdocument.getElementByIdを使用してHTML要素に時刻を表示し、setIntervalを使用して1秒ごとに時刻を更新する方法を試しています。
- 質問者が遭遇している問題は、setIntervalの場所と使用方法が正しくないため、時計が更新されないというものです。
- ベストアンサー
リアルタイムに時計を表示するときのsetIntervalについて
いつもお世話になっています。 いつも以上に稚拙な質問で申し訳ないのですが、ご助力願います。 <html> <head> <script type="text/javascript"> <!-- var today = new Date(); window.onload = function dispTime(){ document.getElementById("showTime").innerHTML = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); setInterval('dispTime()',1000); } //--> </script> </head> <body> <div id="showTime"></div> </body> </html> できるだけ<body onload="">を使いたくないので、window.onloadにしてあります。 イメージとしては、document.getElementById("showTime").innerHTMLでshowTimeに時間が表示され、setIntervalで再度disptimeが呼ばれ、という無限ループになればよいと考えてこのソースになりました。 ただ現状は、ロード時に時刻が表示され、そのまま動きません。 たぶんsetIntervalの場所とか使い方がおかしいような気がするのですが、どうもよくわかりません。 参考にしたサイトによってsetInterval("dispTime()"...だったり setInterval("disptime"...だったりと記述がバラバラで、 ほとんどのところでは、body onload="setInterval("...とonload扱いでした。 body onloadは使わずに、1秒ごとに動く時刻表示をするには、どこを直せばよいでしょうか。 よろしくお願いします。
- nyalio
- お礼率37% (43/114)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <head> <script type="text/javascript"> window.onload = function(){setInterval('dispTime()',1000);} function dispTime(){ var today = new Date(); document.getElementById("showTime").innerHTML = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); } </script> </head> <body> <div id="showTime"></div> </body> </html>
関連するQ&A
- setIntervalについて
お世話になります <script type="text/javascript"><!-- window.onload=function() { n=0; Timer = setInterval("ch()",1000); } function ch() { n++; document.getElementById("test").innerHTML = n; } function re() { clearInterval(Timer); } function call() { Timer = setInterval("ch()",1000); } //--></script> <input type="button" onclick="re()" value="reset"> <input type="button" onclick="call()" value="call"> <div id="test"></div> としたときにページを表示したら1秒ごとに<div>『test』に1ずつ数が増えて表示されていき『reset』ボタンを押すとTimerが止まり『call』ボタンを押すとTimerが再開します でもTimerを解除せずに『call』ボタンを押すと1秒に2ずつ、3ずつという風に相乗されていきます（新しいTimerが追加されていく） これをTimerが起動しているときに『call』ボタンを押すとreturn false; 起動していないときにはTimerを起動させるという風にすることは可能でしょうか？ (Timerが起動しているときに『call』ボタンを押せないようにする以外に）
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 【javascript】document.getElementByIdは一つしか使えないの？
以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはＩＥ，ＦＦと試しましたが共に同じ結果でした。 ＦＦのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか？
- ベストアンサー
- JavaScript
- ブラウザに文字が表示されません。
はじめまして。 質問があります。 以下のコードを見てください。 ---------------------------------------------------------------- <html> <head> <script type="text/javascript"> <!-- function rand() { window.document.getElementById("i").innerHTML = Math.random(); } //--> </script> </head> <!-- <body onLoad="rand()"> --> <body> <form name="myform"> <input type="submit" name="submit" onClick="rand()"><br> </form> <div id="i"></div> </body> </html> ---------------------------------------------------------------- あらかじめonLoadイベントでrand()関数を呼び出しておくと、後から 送信ボタンを押下すると、 ブラウザに乱数が表示されるのですが、onLoadイベントを使用せずに 送信ボタンを押下するとブラウザに 乱数が表示されません。これは一体なぜなのでしょうか？ 例えば、レイアウトが一度確定したら、そのレイアウトに後から 文字などを表示させることができないなどというような原因 なのでしょうか？よくわかりません。ご教授お願いします。
- ベストアンサー
- JavaScript
- PHPとjavascriptを融合させたカウントダウンを作りたい
PHPとjavascriptを融合させたカウントダウンを作りたい 宜しくお願い致します。 現在、アクセスした時刻から時計が「0秒」を指すまでのカウントダウンを 表示させているのですが、 これを、PHPで取得したサーバー時刻を使ったカウントダウンにしたい と思っています。 現在、利用しているjavascriptは、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { date=new Date(); second=date.getSeconds(); var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ なのですが、これを、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { second=<?php print date(s) ?>; var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ というイメージでカウントダウンさせたいのですが、 何か方法はございますでしょうか？それともPHPを利用する時点で 不可能な話でしょうか？ (試しに後述のスクリプトを実践してみた所、案の定PHPで取得した秒で カウントダウンは止まってしまいます) それでは宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptの実行のタイミングについて
javascriptの実行のタイミングについて教えてください。 下記サンプルを試したところ、一瞬遅れて表示されるのが気になりました。 http://html.appelle.jp/2006/04/javascript_4.html 画面表示と同時に時刻も表示させるには、 どうしたらよいでしょうか？ setInterval ( 'clocknow()',1000 ) ;って書いてあるので、 初めも1秒後に読み込まれるってことなのでしょうか？ それとも、body onloadとか書かなければいけないのでしょうか？ ちなみに、form部分を、<span id="clock"></span>、 head内の読み込み部分を、document.getElementById("clock").innerHTMLと変え、試しています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- なぜfunc()で動き、funcで動かないのか。
以前良く似た質問をしましたが、また疑問点が出たので質問します。 前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。 var img = new Image(); window.onload = function() { img.onload = func; } function func() { （省略） } その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。 しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { document.getElementById("result1").innerHTML = "result1"; } function result2() { document.getElementById("result2").innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか？ あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { this.innerHTML = "result1"; } function result2() { this.innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> 両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか？
- ベストアンサー
- JavaScript
- セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- 1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- ベストアンサー
- JavaScript
- ある日付からHPの一部を非表示することは可能でしょうか？
ＨＰで<marquee>タグを使うTelopを表示させており、これを数日後には表示されないようにしたいと思っています。 私はまだJavaScriptを勉強を始めたばかりです。（CSSは少々・・） まずはネットで人の書いたソースをまねて作ってみたのですが、きちんと理解して書いていないのでうまくいきません。 どなたかよいヒントを教えて頂けますでしょうか？ お恥ずかしいのですが、現在はこのようなソースを書いたのですが・・・表示されなくなる日付を設定して、実際にＨＰを開いたときの日付とを比べ、表示／非表示を判断するようにしたいのです。 <html> <head></head> <body onload="test()"> <script language="JavaScript"> <!-- function test() { var off = Date.parse("Dec 21, 2008"); var on = (new Date()).getTime(); if(on < off) document.write(document.getElementById("hyouji")); else document.write(document.getElementById("hihyouji")); } --> </script> <div id="hyouji"><marquee>ようこそ！！</marquee></div> <div id="hihyouji"></div> </body> </html> よろしくお願いいたします。
- ベストアンサー
- JavaScript
