JavaScriptで時計を24時間表示する方法
- JavaScriptでホームページに配置した時計の表示を24時間表記に変更する方法について質問させていただきます。
- 現在の表示はAM/PM表記になっており、例えばAM07時というような表示になってしまいます。
- 24時間表示にするためのJavaScriptのコードや設定方法を教えていただけますでしょうか？
- ベストアンサー
javascript 時計24時間表示
こんばんは。 現在、ホームページにデジタルの時計を配置しているのですが 表示について質問させていただきます。 今配置しているのは下記のソースで <script type="text/javascript"> <!-- document.write('<img src="am.jpg" name="p0"><IMG src="0.jpg" name="p1"><IMG src="0.jpg" name="p2">'); document.write('<img src="ten.jpg" name="p7"><IMG src="0.jpg"name="p3"><IMG src="0.jpg" name="p4">'); /* document.write('<img src="ten.jpg" name="p8"><IMG src="0.jpg" name="p5"><IMG src="0.jpg" name="p6">'); */ function jikoku3(){ data = new Date(); hour = data.getHours(); if((hour >= 12)){ hour = hour - 12; hour2 = hour % 10; hour1 = (hour-hour2) / 10 ; ampm = "pm"; }else{ hour2 = hour % 10; hour1 = (hour-hour2) / 10 ; ampm = "am"; } mine = data.getMinutes(); mine2 = mine % 10; mine1 = (mine - mine2) / 10; sec = data.getSeconds(); sec2 = sec % 10; sec1 = (sec - sec2) / 10; document.p0.src = ampm + ".jpg"; document.p1.src = hour1 + ".jpg"; document.p2.src = hour2 + ".jpg"; document.p3.src = mine1 + ".jpg"; document.p4.src = mine2 + ".jpg"; document.p5.src = sec1 + ".jpg"; document.p6.src = sec2 + ".jpg"; document.p7.src = "ten.jpg"; document.p8.src = "ten.jpg"; } setInterval("jikoku3()",1000); // --> </script> 表示がAM07時とかの表記になってしまいます。 それをAM/PMではなくて20時、23時等の24時間表示にするには どうしたら良いでしょうか？ 本当に初歩的な質問をしてしまい失礼かと思いますが 宜しくお願い致します。
- buzinesswa
- お礼率42% (50/117)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
すでに回答は出ていますけれど… 少し繰返しを省いて、こんなのもあるかと。 ご質問の例では、「秒」の部分の表示用<img >がコメントアウトされていますが、代入する方はそのままなのでどちらが正なのか不明でした。 （「秒」表示が不要な場合は、disp = ["Hours","Minutes"]; に） intervalは1000がいいのか、500がいいのか…（ご提示のものと同じにしてあります） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <!-- ↓表示対象用のdiv↓ --> <div id="target"> </div> <script type="text/javascript"> <!-- (function(toTag) { var targetId = "target"; // ← 表示用divのid var disp = ["Hours","Minutes","Seconds"]; // ← 表示内容 var time = function() { var i = 0, d, n, m, html = ""; var date = new Date(); while (d = disp[i++]) { n = "0" + date["get" + d](); m = n.length - 2; if (i>1) html += toTag("ten"); html += toTag(n.charAt(m++)); html += toTag(n.charAt(m)); } document.getElementById(targetId).innerHTML = html; } setInterval(time, 1000); })(function(str) { return '<img src="' + str + '.jpg" alt="">'; }); // --> </script> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 お馬鹿な無駄があったので、ちょいと訂正。（内容は同じです） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <!-- 表示対象用のdiv↓ --> <div id="target"> </div> <script type="text/javascript"> <!-- (function(toTag) { var targetId = "target"; // ← 表示用divのid var disp = ["Hours","Minutes","Seconds"]; // ← 表示内容 var time = function() { var i = 0, d, n, html = ""; var date = new Date(); while (d = disp[i]) { n = date["get" + d]() + ""; if (2 > n.length) n = "0" + n; if (i++) html += toTag("ten"); html += toTag(n.charAt(0)) + toTag(n.charAt(1)); } document.getElementById(targetId).innerHTML = html; } setInterval(time, 1000); })(function(str) { return '<img src="' + str + '.jpg" alt="">'; }); // --> </script> </body> </html>
- yamada_g
- ベストアンサー率68% (258/374)
>if((hour >= 12)){ >hour = hour - 12; >hour2 = hour % 10; >hour1 = (hour-hour2) / 10 ; >ampm = "pm"; >}else{ >hour2 = hour % 10; >hour1 = (hour-hour2) / 10 ; >ampm = "am"; >} の部分を削って、hourの値をそのまま利用すればいいのではないでしょうか。 必要であれば0～9時の場合は頭に"0"を付加するようにして。
関連するQ&A
- HPで時間ごとに背景を変えたい
HPの設定で、時間ごとに背景を変えたいと思ってます。 そこで検索してみたところこんなソース↓を発見したのですが、一日に三回変えられるものでした。これを四回にしたいのですが、上手く書き換えられません。どこを直せばよいでしょうか？ <script language="JavaScript"> <!--// bg1=0; bg2=12; bg3=20; jikoku=new Date(); jikan=jikoku.getHours(); if(jikan>=bg1&&jikan<bg2) document.write('<body background="img/1.jpg">'); else if(jikan>=bg2&&jikan<bg3) document.write('<body background="img/2.jpg">'); else document.write('<body background="img/3.jpg">'); //--> </script>
- 締切済み
- その他（インターネット・Webサービス）
- 一定時間で変化する画像とリンク
業者さんにトップのページを作成してもらいました。 一定時間で画像が変化するようになっているのですが、 その画像ごとにクリックした際に違うリンクを貼りたいのですが 初心者の為、よくわかりません。 下記ソースですが どこを編集したらよいのでしょうか？ <!-- //変更秒間隔を指定 var sec = 5; sec = sec * 1000; arrI = new Array("top_P1.jpg","top_P2.jpg","top_P3.jpg") var num = arrI.length; var arrO = new Array(); for (var i=0;i<num;i++) { arrO[i] = new Image(); arrO[i].src = arrI[i]; } i = 0; function cngImg(){ if(document.all){ document.images.img.style.filter="blendTrans()"; document.images.img.filters.blendTrans.Apply(); } document.images.img.src = arrO[i].src; if(document.all){ document.images.img.filters.blendTrans.Play(); } i ++; if(i >= num){i = 0;} setTimeout("cngImg()",sec); } //-->
- 締切済み
- JavaScript
- JavaScriptで画像を変更する
質問が分かりずらいと思いますが、お願いします。 <body>内に↓が書かれています。 <script language="JavaScript"> <!-- function ChangePics() { for(i = 0; i < 3; i++) document.images[i].src = "white.jpg"; } // --> </script> <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> <form> <input type="button" value="画像一括変更" onclick="ChangePics()"></input> </form> ------------------------------------------------------------ [画像一括変更]ボタンをクリックすると表示されていた３枚の「black.jpg」が「white.jpg」に切り替わります。 ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、 <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。 ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。 質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。
- ベストアンサー
- JavaScript
- JavaScriptのラジオボタンについてご質問させていただきます。
JavaScriptのラジオボタンについてご質問させていただきます。 ラジオボタンに選択したメニューの合計カロリーを表示するというシステムを作っているのですが、私は初心者なため、行き詰まってしまいました。。 簡単なシステムで、ハンバーガー、サイドメニュー、ドリンクと３つの項目にそれぞれ２つ選択肢があって、最後に計算ボタンを押すと選んだメニューの合計カロリーが出るというものです。 私が作ったコードが以下になります。 <html> <head> <title>マックでカロリー</title> <script language="javascript"> a =document.formA.hamburger.value; b =document.formB.sidemenu.value; c =document.formC.drink.value; function calccalorie(){ calorie = "a + b + c"; return eval(calorie); } function writecalorie(){ document.write("あなたのマックでの摂取カロリーは" + calccalorie() + "kcalです！<br /><br />"); document.write("ちなみに、一日に必要なエネルギー量の目安は、20代男性で2650kcal、20代女性で2050kcalです。"); } </script> </head> <body> <fieldset> <p> <h2>ハンバーガー</h2><br /> <img src="hamburger.jpg" /> <img src="bigmac.jpg" /><br /> <form name="formA"> <input type="radio" name="hamburger" value="274" /> ハンバーガー <input type="radio" name="hamburger" value="555" /> ビッグマック </form> </p> </fieldset> <fieldset> <p> <h2>サイドメニュー</h2> <img src="frenchfries.jpg" /> <img src="shakashakachicken.jpg" /><br /> <form name="formB"> <input type="radio" name="sidemenu" value="454" /> マックフライポテト（M） <input type="radio" name="sidemenu" value="187" /> シャカシャカチキン </form> </p> </fieldset> <fieldset> <p> <h2>ドリンク</h2> <img src="cocacola.jpg" /> <img src="mcshake.jpg" /><br /> <form name="formC"> <input type="radio" name="drink" value="140" /> コカコーラ（M） <input type="radio" name="drink" value="321" /> マックシェイクバニラ（M） </form> </p> </fieldset> <form> <input type="button" name="btn1" value="何カロリー？" onClick="writecalorie()" /> </form> </body> </html> JavaScriptを勉強し始めて1週間ほどなので、すごく見当違いなことをしているかもわかりません＾＾； 何かアドバイス（参考ホームページでも）いただければ幸いです。 よろしくお願いいたします。
- 締切済み
- JavaScript
- JavaScriptで画面サイズによって表示非表示
CSSメディアクエリでdisplay:noneが使えないケースで質問させてください。 ・JavaScriptでアクセス元の画面サイズを取得し、 ・CSSメディアクエリのように900px以下なら<img src="1.jpg">を非表示、 ・900px以上なら<img src="1.jpg">を表示、 のようにHTMLタグをコントロールしたいです。 JavaSctiptはdocument write()位しかわかりません。 どなたかご存知の方がいらっしゃったら教えて頂けませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascript 初心者です 関数について
javascript 初心者です。 下記のスクリプトでmyFunc()の部分に引数をつかって、 function myFunc(arg){ document.arg.src = "pic_b.jpg"; } <p onclick="myFunc('stage')">Bに入れ替え</p> のようにしたいのですが、うまくいきません…。 正しいスクリプトを教えてください。 よろしくお願いします。 <html> <head> <script type="text/javascript"> <!-- function myFunc(){ document.stage.src = "pic_b.jpg"; } --> </script> </head> <body> <p onclick="myFunc()">Bに入れ替え</p> <img src="pic_a.jpg" name="stage"> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptで制御して、更新ごとに画像変更してさらにリンクも飛ばす
前回お世話になりました。 ありがとう御座いました。 line = 4; mes = new Array(4); mes[0] ='<img src="img/1.jpg">'; mes[1] ='<img src="img/2.jpg">'; mes[2] ='<img src="img/3.jpg">'; mes[3] ='<img src="img/4.jpg">'; Rnd = Math.floor(Math.random()*line); document.write(mes[Rnd]); コレに付随させて、画像クリックしたら、リンクに飛ぶようにしたいと思っております。 どうしたらいいのかまったくわからないので、助けてください。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptのカルーセル
配列に入れたイラストとそのタイトルを「次へ」「戻る」ボタンで順次両方向に表示したいのです。画像をボタンで前後に移動するところまではできたのですが、画像に対応する表題をどうやって表示したらいいのかどなたか教えていただけないでしょうか。やはりテーブルを利用しないとだめでしょうか。そうすると今度は画像をどうやって配列からテーブルに呼び出していいかわかりません。表題ですので画像と表題を配列に入れて同じカウンタで呼び出せればと思っています。以下現在のコードです。よろしくお願いします。 <html> <head> <title>バックナンバー</title> </head> <body> <center> <table width="550"><tr><td><td> <script type="text/javascript"> <!-- //画像を格納する配列の作成 var IMG = new Array(); IMG[0]=new Image(); IMG[0].src="chatsune/chatsune18.JPG"; IMG[1]=new Image(); IMG[1].src="chatsune/chatsune19.JPG"; IMG[2]=new Image(); IMG[2].src="chatsune/chatsune20.JPG"; IMG[3]=new Image(); IMG[3].src="chatsune/chatsune21.JPG"; IMG[4]=new Image(); IMG[4].src="chatsune/chatsune22.JPG"; IMG[5]=new Image(); IMG[5].src="chatsune/chatsune23.JPG"; IMG[6]=new Image(); IMG[6].src="chatsune/chatsune24.JPG"; IMG[7]=new Image(); IMG[7].src="chatsune/chatsune25.JPG"; var cnt=0; function Forward() { if(document.getElementById) { if(cnt >= IMG.length-1) { cnt = IMG.length-1; } else{ cnt++; document.getElementById("sd").src = IMG[cnt].src; //一つ画像を表示したらカウント用変数cntの値を＋１にする } } } function Back() { if(document.getElementById) { if(cnt <= 0) { cnt = 0; } else { cnt--; document.getElementById("sd").src = IMG[cnt].src; } } } </script> <img src="chatsune/chatsune18.JPG" id="sd" width="500" height="480" alt=""> <br> </td></td></tr> <tr><td align="left"> <form name="slide"> <input type="button" value="戻る" onclick="Back()"></td> <td align="right"> <input type="button" value="次へ" onclick="Forward()"></td></tr> <tr><td></td><td align="right"> <a href="list.html">バックナンバーのリストへ戻る</a></td></tr> </table> </form> </body> </center> </html>
- ベストアンサー
- JavaScript
- javascriptで画像を表示する
javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ・JAVASCRIPTを使って、ホームページを作成しています。
・JAVASCRIPTを使って、ホームページを作成しています。 ・ JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> ・というscriptを同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。 ・一つのボタンに２つのJAVAを使う場合何か特別な入力が必要なのでしょうか？ ・それとも、ただ単純にボタンのタグが誤っているのでしょうか？ ・どなたかご教授お願い致します。 ・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。 ・よろしくお願いします！
- ベストアンサー
- JavaScript
お礼
迅速な返答ありがとうございます。 ちょっと動作の実験をしてみます。