• 締切済み

javascriptでの時刻表示カスタム

ホームページを作れと言われた普通のOLです。 htmlとcssは少しだけ触れますが、javascriptは......(T_T) 知人や知り合いの社員共々聞きましたが全滅です..... 本題ですが、javascriptで現在時刻を取得し、それをそれぞれの要素へ反映させたいです。 例えば、 <div class="smample">??月??日??時??分</div>←現在の時刻-3分 <div class="smample">??月??日??時??分</div>←現在の時刻-4分 <div class="smample">??月??日??時??分</div>←現在の時刻 <div class="smample">??月??日??時??分</div>←現在の時刻-15分 <div class="smample">??月??日??時??分</div>←現在の時刻-4分 という具合に表示できれば最高です。 基本的な時刻表示（下記記載のスクリプト）で試行錯誤しましたが、 ??月??日??時5分の場合、-6分とすると「分」の所の表示が0-1となってしまいます。 更に、-4分/-5分といった複数指定もできません。 javascriptにお詳しい方、どうかご教授下さい。 正直凄く困ってます。。。。 <script type="text/javascript"> var get_current_timestamp = function() { var weeks = new Array('日', '月', '火', '水', '木', '金', '土'); var d = new Date(); // 年月日・曜日・時分秒の取得 var month = d.getMonth() + 1; var day = d.getDate(); var week = weeks[ d.getDay() ]; var hour = d.getHours(); var minute = d.getMinutes() - 6; var second = d.getSeconds() + 10; // 1桁を2桁に変換する if (month < 10) {month = "0" + month;} if (day < 10) {day = "0" + day;} if (hour < 10) {hour = "0" + hour;} if (minute < 10) {minute = "0" + minute;} if (second < 10) {second = "0" + second;} // 整形して返却 return d.getFullYear() + "/" + month + "/" + day + "（" + week + "） " + hour + ":" + minute + ":" + second; } // 現在の日付・時刻を表示する document.write(get_current_timestamp()); </script>

みんなの回答

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.3

> リアルタイムに表示させなくしたいのですが、できますか...? setIntervalで更新しているだけなので、 setIntervalを使わないように直せば良いです。

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

どのような使い方をなさるのかよくわからないのですが、taimestampという名称とご提示のコードから見て、1回だけ表示すればよさそうと勝手に想像ました。 文書内のclass="timeStamp"となっているdiv要素（<div class="timeStamp">）を対象として、それぞれの要素内に当初記述してある時間差に応じた時刻を上書きするというサンプルです。 時間差の指定は　[+|-] [時間] [分] [秒]で、それ以外の文字がある場合は、class="timeStamp"となっていても何もしません。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> </head> <body> <div class="timeStamp">-3分</div> <div class="timeStamp">-4分</div> <div class="timeStamp">0</div> <div class="timeStamp">-15分</div> <div class="timeStamp">1時間30分</div> <script type="text/javascript"> (function(){ var toNum = function(str){ return str?+str.match(/^\d*/):0; } var pad = function(n){ return (n<10?"0":"") + n; } var now = +new Date(); var div = document.getElementsByTagName("div"); var i = 0, d, data, def; while(d=div[i++]){ 　if(d.className.match(/(^| )timeStamp( |$)/)){ 　　data = d.innerHTML.replace(/[　]/g, "").match(/(^[-+])?(\d*時間)?(\d*分)?(\d*秒?)?$/); 　　if(data!==null){ 　　　def = (toNum(data[2]) * 60 + toNum(data[3])) * 60 + toNum(data[4]); 　　　def *= (data[1]==="-"?-1000:1000); 　　　dt = new Date(now + def); 　　　data = pad(dt.getMonth() + 1) + "月"; 　　　data +=pad(dt.getDate()) + "日"; 　　　data += pad(dt.getHours()) + "時間"; 　　　data += pad(dt.getMinutes()) + "分"; 　　　data += pad(dt.getSeconds()) + "秒"; 　　　d.innerHTML = data; 　　} 　} } })(); </script> </body> </html> ＞ホームページを作れと言われた普通のOLです 業務であるのなら、会社の資金と時間でまず学校などに行かせてもらい、それなりの学習がすんでから作成するのが順序ではないでしょうか。 あるいは、どなたかわかっている上司なりが、手順や方法を指導してくれるとか。 それもダメなら、外部の制作できるところへ外注するというのが普通の発想だと思いますけれど…

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.1

setMinutesなどを使えば-6になろうがちゃんと適切に処理してくれます。 <div id="now"></div> <div id="before3min"></div> <div id="before4min"></div> <div id="before15min"></div> <script type="text/javascript"> function DateToString (d) { var weeks = ['日', '月', '火', '水', '木', '金', '土']; // 年月日・曜日・時分秒の取得 var month = d.getMonth() + 1; var day = d.getDate(); var week = weeks[ d.getDay() ]; var hour = d.getHours(); var minute = d.getMinutes() ; var second = d.getSeconds() ; // 1桁を2桁に変換する if (month < 10) {month = "0" + month;} if (day < 10) {day = "0" + day;} if (hour < 10) {hour = "0" + hour;} if (minute < 10) {minute = "0" + minute;} if (second < 10) {second = "0" + second;} // 整形して返却 return d.getFullYear() + "/" + month + "/" + day + "（" + week + "） " + hour + ":" + minute + ":" + second; } setInterval( function () { //現在時刻のDateオブジェクトを必要数つくる var d_now = new Date(); var d_before3min = new Date(d_now); var d_before4min = new Date(d_now); var d_before15min = new Date(d_now); //過去の時刻をセット d_before3min .setMinutes(d_now.getMinutes()-3); d_before4min .setMinutes(d_now.getMinutes()-4); d_before15min.setMinutes(d_now.getMinutes()-15); //文字列に変換して反映 document.getElementById("now").innerHTML = DateToString(d_now); document.getElementById("before3min").innerHTML = DateToString(d_before3min); document.getElementById("before4min").innerHTML = DateToString(d_before4min); document.getElementById("before15min").innerHTML = DateToString(d_before15min); } , 1000); </script>

websummery
質問者

お礼

本当にありがとうございますm(__)m とても助かりました(*^_^*) setMinutesを使うのですね！勉強になりました。 －??分の部分は表示できて感動しました!!笑 できれば、スクリプトを実行した時点の時刻で表示（－??分も） リアルタイムに表示させなくしたいのですが、できますか...? 1・2・3・4・5・6・7・・・・・秒ではなく「1」秒(スクリプト実行時の現在時刻)と表示させたいです。 何度もほんとうにすみません(>_<)

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • PHPでPCのローカル時刻は取得出来ますでしょうか？

    PHPでPCのローカル時刻は取得出来ますでしょうか？ 現在、javascriptで取得しているのですが、これを PHPの変数として取得出来ないか考えております。 javascriptでは下記のように取得して表示させています。 <script type="text/javascript"> var nowtime = new Date(); var hour = nowtime.getHours(); var minute = nowtime.getMinutes(); var second = nowtime.getSeconds(); if(hour < 10) { hour = "0" + hour; } if(minute < 10) { minute = "0" + minute; } if(second < 10) { second = "0" + second; } document.write(hour,minute,second); </script> 例えば現在が12時34分56秒だとしたら、javascriptで 「123456」という6ケタの数字を取得出来ます。 この「123456」を、PHPの変数として使いたいです。 （$jikoku = 123456） どなたかお知恵を拝借出来ませんでしょうか？ 何卒宜しくお願い致します。

    • ベストアンサー
    • PHP
  • JavaScriptでdocument.fileCreatedDate

    JavaScriptでdocument.fileCreatedDateを使おうとして <script type="text/javascript"> <!-- var date = new Date(document.fileCreatedDate); var year = date.getYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var min = date.getMinutes(); if(year < 2000){year += 1900;} if(month < 10){month = "0" +month;} if(day < 10){day = "0" + day;} if(hour < 10){hour = "0" + hour;} if(min < 10){min = "0" + min;} document.write("作成日：" + year + "年" + month + "月" + day + "日" + hour + "時" + min + "分" + "<BR>"); //--> </script> のようなスクリプトを作ったんですが表示がおかしくなります。 Google chromeでも正常に表示できるようにしたいです。 よろしくおねがいします。

  • <SCRIPT type="text/javascript">

    <SCRIPT type="text/javascript"> <!-- function Watch() { now = new Date(); year = now.getYear(); month = now.getMonth()+1; day = now.getDate(); hour = now.getHours(); minute = now.getMinutes(); second = now.getSeconds(); if (year < 1000) { year += 1900 } if (hour < 10) { hour = '0' + hour } if (minute < 10) { minute = '0' + minute } if (second < 10) { second = '0' + second } document.form.watch.value = year+'年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second; setTimeout("Watch()",1000); } document.write('<FORM name=form><INPUT name=watch size=27></FORM>'); Watch(); //--> </SCRIPT> の意味を詳しく説明してください。 あと、scriptでカウントダウンの作りかたを教えてください。 ようするに、999から998、997えとカウントダウンするという意味です。 だれか教えてください。かなり詳しく小学生でもわかるように超めっちゃ詳しく教えてください。 お願いします。 ほんと詳しくお願いします。できるだけ早くお願いします。 このscriptの中身を詳しくお願いします。あと、 <script type="text/JavaScript">を小学生でもわかるほど詳しく書いてあるサイトがあれば教えて ください。 ※JavaScriptでランダムRPGゲームを作る　は知っているのでもっと詳しく説明してあるサイトを教えてください。

  • 日時や時刻を指定し、その時間にメッセージを表示させる方法、、、

    Visual Basic 6.0 を始めたばかりの者です。 「日時や時刻を指定し、その時間になったら 　あらかじめ指定したメッセージを表示させる」 というプログラムを作ろうとしています。 自分なりに考えたのは次のような方法です。 1.Year、Month、Day、Hour、Minute関数で、今日の年月日と時刻を得て 　変数に入れる。 2.コンボボックスに「2003」などの数値を入れておき、 　メッセージを表示させたい年月日と時刻を選択させる。 　指定された年、月、日、時間、分はそれぞれ変数に入れる 4.「設定」ボタンを押す。 3.IF関数を使い、1.と2.の変数が全部一致したら、 　メッセージボックスなどを出してメッセージを表示。 If (指定したYear = 今日のYear) And _ (指定したMonth = 今日のMonth) And _ (指定したDay = 今日のDay) And _ (指定したHour = 今日のHour) And _ (指定したMinute = 今日のMinute) Then テキストボックス = "定められたメッセージを表示する" End If ここで行き詰まってしまいました。 タイマーコントロールを使うのかな？とは思うのですが、 どのようにして使えば良いのか判りません。。。 1.の段階で既に間違っているのでしょうか。 タイマーコントロールを使って、今日ではなく「今現時点の」 年月日と時刻を得る必要があるのでしょうか、、、？ 恐らく簡単な事なのかも知れませんが、判りやすく教えて戴けると幸いです。 宜しくお願い致します。

  • 時計が表示できません

    ASP.NET　C#　でHTMLとJavascriotを使用しWeb画面を作成しているのですが、そこに表示するリアルタイムで動く時計が上手く表示できません。<head runat="server">～</head>にて以下のプログラムを埋め込むと動かす事はできます。 <SCRIPT type="text/javascript"> <!-- function Watch() { now = new Date(); year = now.getYear(); month = now.getMonth()+1; day = now.getDate(); hour = now.getHours(); minute = now.getMinutes(); second = now.getSeconds(); if (year < 1000) { year += 1900 } if (hour < 10) { hour = '0' + hour } if (minute < 10) { minute = '0' + minute } if (second < 10) { second = '0' + second } document.form.watch.value = year+'年' + month + '月' + day 　　+ '日 '+ hour + ':' + minute + ':' + second; setTimeout("Watch()",1000); } document.write('<FORM　name=form><ｎame=form><INPUTname=watchsize=27></FORM>'); Watch(); //--> （注：上記プログラムはあるサイトのコピーとなります） ですが、<body>～</body>内の自分が表示させたい位置に埋め込むと、 表示できません。 大変申し訳ないのですが、 わかる方どなたか教えていただけないでしょうか？

  • PHP mysql 時刻表示方法

    データベースに登録されている時刻を表示する方法についてご質問があります。 PHPは初心者です。 コードは以下になります。 $row = mysql_fetch_array($result_member); if ($row) { $m_reg_date = $row['reg_date']; $m_edit_date = $row['edit_date']; } } $str_reg = $m_reg_date; list($m_reg_year,$m_reg_month,$m_reg_day) = explode("-",$str_reg); $format_reg = "%04d年%02d月%02d日"; $str_edit = $m_edit_date; list($m_edit_year,$m_edit_month,$m_edit_day) = explode("-",$str_edit); list($m_edit_hour,$m_edit_minute,$m_edit_second) = explode(":",$str_edit); $format_edit = "%04d年%02d月%02d日 %02d:%02d:%02d"; という記述をしており、 <?php printf($format_edit, $m_edit_year, $m_edit_month, $m_edit_day, $m_edit_hour, $m_edit_minute, $m_edit_second); ?> で表示させています。 しかし、こちらの表示方法だと 2010年04月03日 2010:43:22 と表示されてしまい、時刻の**時がなぜか西暦になってしまいます。 こちらを24時間方式の表示に変更したいのですが、 お分かりのかたいらっしゃいましたらご教授お願いいたします。

    • ベストアンサー
    • PHP
  • 1分毎にHTMLを切り替えるJavaScript

    <script> function getImageFile(date){ var dir = 'min_img/'; var ext = 'jpg'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<img src="' + image + '"><img src="' + next_image + '" style="display:none;">') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> <body> <div id="clock"></div> </body> 上記のJavaScriptは1分毎に画像が切り替えるものです。 画像でなく、インフレームでHTMLを表示したいのですが、うまくいきません。 <script> function getImageFile(date){ var dir = 'html/'; var ext = 'html'; var hour = date.getHours(); if(hour < 10){ hour = '0' + hour; } var minute = date.getMinutes(); if(minute < 10){ minute = '0' + minute; } return dir + hour + minute + '.' + ext; } function updateClock(){ var date = new Date(); var image = getImageFile(date); date.setTime(date.getTime() + 60 * 1000); var next_image = getImageFile(date); $('#clock').fadeOut(1000, function(){ $('#clock') .html('<a href="' + image + '"></a><a href="' + next_image + '" style="display:none;"></a>') .fadeIn(1000); }); setTimeout('updateClock()', 60 * 1000); } $(document).ready(function(){ updateClock(); }); </script> <body> <iframe id="clock"></a></iframe> </body> 宜しくお願いします。

  • ちょっと変わった自動更新

    10分ごとに画像が変わるところがあり、そのアドレスは 8月14日11時0分だと http://aaa.bbb/ccc/08141100.gif となっています。 ただし、その画像更新自体が各2分後（00分のデータなら02分、10分のデータなら12分・・・）まで反映されておいません。そのため、2分間はひとつ前のデータを表示する必要があります。 var now = new Date(); //時間取得 var month = now.getMonth()+1; //月 var day = now.getDate(); //日 var hour = now.getHours(); //時 var min = now.getMinutes(); //分 //二ケタ表示 if(month < 10) { month = "0" + month; } if(day < 10) { day = "0" + day; } if(hour < 10) { hour = "0" + hour; } if(min < 10) { min = "0" + min; } location.href = "http://aaa.bbb/ccc/" + month + day + hour + min + ".gif"; 上記の方法で現在時刻の画像が表示されてくれると思うのですが（違ったら指摘お願いします） ifで03分～12分なら画像のアドレス末尾を00.gifにするーとかだと、03-12、13-22、23-32、33-42、43-52、53-02の6つifを作る他ないのでしょうか？ また、自動更新に関して「各2分に更新する」といった方法がわかりません。 何かアドバイスいただけると幸いです。

  • Javaによる現在時刻の表示について

    Javaで現在時刻を表示するプログラムを作りました。 今のままだと 2009/8/26(木) 15:8:7となり、 月日・時間分秒が一桁のときは前に0をつけて二桁（15:08:07のように）表示にしたいと思います。 何かいい方法はないでしょうか？ if文で作成するとなると、かなりたくさんのコードを書かないといけない気がします。 良い案があれば是非ご教授頂ければと思います。 import java.util.Calendar; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class Servlet_106 extends HttpServlet{ public void doGet(HttpServletRequest req,HttpServletResponse res) throws ServletException,IOException{ res.setContentType("text/html; charset=Shift_JIS"); PrintWriter out = res.getWriter(); String title = "現在時刻:"; Calendar cal = Calendar.getInstance(); int year = cal.get(Calendar.YEAR); int month = cal.get(Calendar.MONTH) + 1; int day = cal.get(Calendar.DATE); StringBuffer dow = new StringBuffer(); switch (cal.get(Calendar.DAY_OF_WEEK)){ case Calendar.SUNDAY: dow.append("日"); break; ～～～（略）～～～ } int hour = cal.get(Calendar.HOUR_OF_DAY); int minute = cal.get(Calendar.MINUTE); int second = cal.get(Calendar.SECOND); out.println("<html lang=\"ja\">"); out.println("<head><title></title></head>"); out.println("<body>"); out.println("<p>現在時刻：" + year + "/" + month + "/" + day + "(" + dow + ")" + hour + ":" + minute + ":" + second + "</p>"); out.println("</body></html>"); out.close(); } }

    • ベストアンサー
    • Java
  • 「誕生日まであと○日です」

    <html> <head> <title>test</title> </head> <body> <SCRIPT LANGUAGE="javascript" TYPE="text/javascript"> <!-- var weeks = new Array('日','月','火','水','木','金','土'); var now = new Date(); var year = now.getYear(); // 年 var month = now.getMonth() + 1; // 月 var day = now.getDate(); // 日 var week = weeks[ now.getDay() ]; // 曜日 var hour = now.getHours(); // 時 var min = now.getMinutes(); // 分 var sec = now.getSeconds(); // 秒 if(year < 2000) { year += 1900; } // 数値が1桁の場合、頭に0を付けて2桁で表示する指定 if(month < 10) { month = "0" + month; } if(day < 10) { day = "0" + day; } if(hour < 10) { hour = "0" + hour; } if(min < 10) { min = "0" + min; } if(sec < 10) { sec = "0" + sec; } document.write('今日：' + year + '年' + month + '月' + day + '日'); // --> </SCRIPT> </body> </html> これで今日の日付けは表示できたのですが 誕生日が7/31なのですが document.writeで 「誕生日まであと○日です」 と表示するにはどうすれば良いでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する