JavaScriptで100日後の日時を表示させる方法
- JavaScriptで現在日時から100日後の日時を求め、表示させる方法について説明します。
- 日付を取得するためには、Dateオブジェクトを使用します。
- Dateオブジェクトのメソッドを使って、現在日時から100日後の日時を計算し、表示させることができます。
- ベストアンサー
JavaScriptで、現在日時から100日後の日時を表示させるには？
JavaScriptで、現在日時から100日後の日時を表示させるには？ JavaScriptで、現在日時から100日後の日時を求め、表示させたいと思っています。 「現在日時を取得する方法」と、「それを表示形式へ変換する方法」は、わかっています。 しかし、「100日後の日時」を表示させる方法が分かりません。 もちろん、年・月・日をまたぐ場合にもちゃんと対応できることが前提です。 極力、単純な方法が理想です。 以下、コードです。ご教授よろしくお願いします。 function func() { var day = new Date(); var datestr = day.toLocaleString(); alert(datestr); }
- hotjupiter
- お礼率71% (33/46)
- JavaScript
- 回答数7
- ありがとう数18
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
まったく同じ方法ですが… ＞極力、単純な方法が理想です。 とのことなので、日にちを足すのが簡単では？ var day = new Date(); day.setDate(day.getDate() + 100); alert(day.toLocaleString());
その他の回答 (6)
- steel_gray
- ベストアンサー率66% (1052/1578)
＞表示させる方法が分かりません。 どこに表示したいのだろう？ alertではないって事だよね？？ 幾つかみつくろって。 <head> <style type="text/css"> p{border:solid thin red;} </style> <script type="text/javascript"> function sample() { var str = new Date().toLocaleString();//100日後に関しては他の方の回答で。 //特定ノードにテキストノードを作って追加する document.getElementById('ABC').appendChild( document.createTextNode(str) ); //特定ノード配下の最初のテキストノードを書き換える document.getElementById('DEF').firstChild.nodeValue =str; //input textの値を書き換える document.getElementById('GHI').value =str; } </script> </head> <body> <p id="ABC"></p> <p id="DEF">aaa</p> <p><input type="text" id="GHI" value="bbb" /></p> <p><input type="button" value="実行" onclick="sample()"></p> </body>
お礼
表示する方法までご教授いただきありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
誤字修正です。 var day=new Date(); //100日 x 24時間 x 60分 x 60秒 x 1000ミリ秒 day.setTime(day.getTime() + (100 * 24 * 60 * 60 * 1000)); 空気読めてなくて申し訳ないです。 もっと複雑な物を作るべきでした。
お礼
ありがとうございます。 この方法でもうまくいきました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
var day=new Date(); //100日 x 24時間 x 60分 x 60秒 x 1000ミリ秒 day.setTime(d.getTime() + (100 * 24 * 60 * 60 * 1000));
- Chaire
- ベストアンサー率60% (79/130)
getYear() メソッドが 2000 年問題を持っていたことにより、getFullYear() メソッドが導入されたのは JavaScript 1.3（NN 4.06）、JScript 3.0（IE 4.0）、そして ECMAScript（2000 年の第 3 版で getYear() を削除し歴史的補遺としてのみ残した）です。現時点で getFullYear() に対応していないスクリプトエンジンはないので、これからの制作者は getYear() を使わないで下さい。 ※有名なサイトが未だにこれを記述しているため、真似をしてしまう人が後を絶たないのですが、少なくとも、2000 年以降に書かれた JavaScript 関連文書で、escape、unescape、Date.prototype.getYear、Date.prototype.setYear、Date.prototype.toGMTString、String.prototype.substr あたりを無批判に用いているものは、不用意と言わざるをえません。もう 2010 年も半ばですよ。 また、月末日を得るには翌月の 0 日をセットするだけです。new Date(2010, 2, 0).getDate() は 2010 年 2 月の最終日、28 を返します。閏年の心配も要りません。この挙動は ECMAScript 規定（15.9 節）で保証されています。 同じ理由で、今（var now = new Date;）から 100 日後を得るには、 now.setDate(now.getDate() + 100); 今から 100 日前を得るには now.setDate(now.getDate() - 100); 今から 300 時間後を得るには now.setHours(now.getHours() + 300); 簡単でしょ？ ※厳密には、Date の内部は 1970-01-01T00:00:00.000 からのミリ秒（時間値）で管理されています。set*** メソッドに与えられた引数は適切にミリ秒に変換されて、時間値と合わされます。get*** が呼ばれたとき、時間値は適切な値に変換されます。
お礼
ありがとうございました。 本質問は、そもそも、本に乗っていたgetDate、setDateの説明を私が勘違いして受け取ったために、できないものと勝手に解釈して質問を立てたものでした。 Chaireさんのご回答が、勘違いに気付くきっかけとなりました。本当にありがとうございました。 getYearが推奨されてないことは知りませんでした。確かに手元の本にもそう書いてありますね… お教えいただきありがとうございました。
- zeff
- ベストアンサー率69% (137/198)
いちおう頑張って作ってみたんですが、いかがでしょうか。 何日後でも年をまたいでもOKだと思うのですが。 長かったり不手際があったらごめんなさい。 <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>title</title> <script type="text/javascript"> <!-- function func(){ //現在年月日時刻 var date = new Date(); var yy = date.getYear(); if ( yy < 2000 ){ yy += 1900; } var mm = date.getMonth() + 1; var dd = date.getDate(); var h = date.getHours(); if( h < 10 ){ h = '0' + h; } var m = date.getMinutes(); if( m < 10 ){ m = '0' + m; } var s = date.getSeconds(); if( s < 10 ){ s = '0' + s; } var cnt = 0,x = 100; //今月 for( var i = dd; i <= getDaysInMonth( yy, mm ); i++ ){ if( cnt == x ){ showMsg( x, yy, mm, dd, h, m, s ); break; }else{ dd++;cnt++; } } //次月以降 mm++; dd = 1; while( cnt < x ){ dd++; cnt++; if( dd > getDaysInMonth( yy, mm ) ){ mm++; dd = 1; } if( mm > 12 ){ yy++; mm = 1; } } showMsg( x, yy, mm, dd, h, m, s ); } //月の日数を返す関数 function getDaysInMonth(iYear, iMonth) { var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); if ( ((iYear % 4 == 0) && (iYear % 100 != 0)) || (iYear % 400 == 0) ) { daysInMonth[1] = 29; } return daysInMonth[iMonth - 1]; } //x日後をalertする関数 function showMsg(x, yy, mm, dd, h, m, s ){ if( mm < 10) mm = '0' + mm; if( dd < 10) dd = '0' + dd; alert( x + '日後は' + yy + '/' + mm + '/' + dd + '/' + h + ':' + m + ':' + s ); } window.onload = function(){ func(); } //--> </script> </head> <body> </body> </html>
お礼
労作、ありがとうございました。 簡単な方法で実装することができました。
補足
あ…ありがとうございます。 一応、うまく動作することが確認できました。 さぞかし大変だったのでは…？ ただ、極力簡単な方法を求めていたので、これではちょっとあまりにもソースコードが長すぎかと…。 逆に、こんなに大変なコードを書かないと実現できないことなんでしょうか？ JavaScriptについては最近勉強し始めたばかりですが、こんな基本的なことが2～3行のコードで実現できないとは………こんなにも不便な言語なのですか…？ クッキーの有効期限を設定したりとか、利用価値が多そうなのに…。 そういう場合、みなさんどうやっているのでしょう？ すみません、せっかくの労作に愚痴をこぼしてしまって…
- yyr446
- ベストアンサー率65% (870/1330)
100日後は 100×24×3600×1000＝8640000000ミリ秒 です。(オーバーフローしないかなあ．．．) day.getMilliseconds() に8640000000を加算した値をsetすればいいんじゃない。 var day = new Date(); var datestr = day.toLocaleString(); var post_day= new Date(); post_day.setMilliseconds(day.getMilliseconds()); var post_datestr = post_day.toLocaleString(); alert(datestr); alert(post_datestr);
お礼
この方法でもうまくいきました。 勝手にできないと思い込んでました。失礼しました…
補足
getMilliseconds、setMillisecondsの範囲は0～999です。 なのでこの方法では実現できません……
関連するQ&A
- 複数の無名関数を合成したい
javascriptにおいて、無名関数を合成する方法を知っている方はいらっしゃるでしょうか？ var func1 = function(){ alert('func1'); } var func2 = function(){ alert('func2'); } この二つの関数を合成して、 var func3 = function(){ alert('func1'); alert('func2'); } という風に合成したいのです。 jQueryを利用して var func3 = $.extend(func1, $func2); と試しましたが、func3 == func1 となってしまうようです。 また、単純に、var func3 = func1 + func2; では、 func3 = function(){alert('func1');}function(){alert('func2');} と意味を成さないものになってしまいます。
- 締切済み
- JavaScript
- javascriptの書き方
javascriptの記述で不明点があります function javas(){ for (var day = 1; true; day++){ //--何かしらの処理 } alert(""); //--ここが呼び出せない } 最後の部分が呼び出せないのですが、もともと呼び出せないものなのでしょうか。 もし呼び出せるとしたらどのように書けばよろしいでしょうか。 よろしくお願いします。
- 締切済み
- JavaScript
- 誕生日からの日数を表示するJavaScriptに、カンマを入れる方法を
誕生日からの日数を表示するJavaScriptに、カンマを入れる方法を教えてください。 JavaScriptの初心者で、申し訳ありません。 誕生日からの日数を表示するJavaScriptと3桁の後にカンマを表示させるJavaScriptは、 それぞれ単独で見つけたのですが、関連のさせ方が分かりません。 誕生日からの日数を表示するJavaScriptは、以下のものです。 days の前後に文字表示をさせています。 この中の days を表示する時に、3桁の後にカンマを表示させたいのですが。 人の生きた日々ですので、万の単位までしか表示しません。 82歳で、30,000日くらいになります。 var tday=new Date(); var bday=new Date(1928,5-1,13); var ac="#ffffff"; var mark=""; var days=Math.ceil((tday.getTime()-bday.getTime())/(24*60*60*1000)); days=(days+"").fontcolor(ac); days=days.bold(); mark=mark.fontcolor(ac); document.write(mark+"いきて来た日々："+days+"日"+mark); 文字列にカンマを入れる以下のJavaScriptも見つけました。 これと上のJavaScriptを関連させることで、誕生日からの日数にカンマを入れられるで しょうか？ もし、できるのであれば、関連のさせかたを教えてください。 以下のものではダメなら、他のJavaScriptで目的を達成できるものを、教えてください。 str= value; for (i=0; i < str.length / 3 ; i++) { str= str.replace ( /^([+-]?\d+) (\d\d\d)/, "$1,$2"); } お願いします。
- ベストアンサー
- JavaScript
- JavaScriptの件
html&cssを勉強中の超初心者です。この度JavaScriptの本を購入し下記のソースを入力しましたが、「ページでエラーが発生しました。」と出てしまいます。どなたかどこが間違えているのか教えて頂けませんか？よろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Dateオブジェクト</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language="JavaScript"> <!-- var youbi= new Array(7); youbi [0] = "(日曜日) "; youbi [1] = "(月曜日) "; youbi [2] = "(火曜日) "; youbi [3] = "(水曜日) "; youbi [4] = "(木曜日) "; youbi [5] = "(金曜日) "; youbi [6] = "(土曜日) "; function NowTime(){ var now = new Date(); var yy = new.getFullYear(); var mm = new.getMonth(); var dd = new.getDate(); var wd = new.getDay(); var h = new.getHours(); var m = new.getMinutes(); var s = new.getSeconds(); var TSUKIHI = yy ＋ "年" ＋ (mm＋1) ＋ "月" ＋ dd ＋ "日"; var JIKOKU = h ＋ "時" ＋ m ＋ "分" ＋ s ＋ "秒"; alert(TSUKIHI ＋ youbi[wd] ＋ JIKOKU ＋ "です"); } //--> </script> </head> <body> <h1>現在の日時</h1> ※ボタンをクイックすると、現在の日時が表示されます。<br> <br> <BUTTON onClick="NowTime()">現在の日時を表示</BUTTON> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- JavaScriptのタイマーについて
JavaScriptのタイマーについて上手く動作しないので質問させて頂きます。 ＜仕様＞ ３秒後に「aaa」のメッセージを表示させる。 ５秒後に「aaa」のメッセージを表示させる。 ＜現在の状況＞ ３秒後に「aaa」のメッセージを表示し、その後は応答なし。 ＜ソース＞ 以下を参照ください。何が悪いのでしょうか？ <HTML> <HEAD> <SCRIPT Language="JavaScript"> <!-- timerID = 10; function func() { alert("aaa"); } function init() { timerID = setTimeout("func()", 3000); timerID = setTimeout("func()", 5000); } // --> </SCRIPT> </HEAD> <BODY onload="init()"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- JavaScriptのsetTimeoutについて
setTimeoutのタイマー処理の仕様を調べています。 var func = function () { alert(1); }; setTimeout(func, 1000); alert(2); このコードを実行した場合、alert(2)→alert(1)の順で処理されるのは当然ですが、 alert(2)を開いたまま1秒以上待ち、そこでOKボタンを押すとどうなるか、という問題です。 Firefoxの実装については下記ページで分かりました。 http://takoyakim.tumblr.com/post/10875885/firefox-settimeout 先ほどのコードの1000ミリ秒の経過処理は、タイマースレッドという専用スレッドで扱うため、 alert(2)で1000ミリ秒以上止めた後にOKボタンを押すと、即座にalert(1)が開きます。 しかしIEの場合はそうではなく、alert(2)を閉じてから約1000ミリ秒後にalert(1)が開きました。 alert(2)を開いたままどれだけ待機しても変わりません。 ChromeやSafariもIEと同じようです。 ですがこの結果は、次のコードの実行結果と矛盾してしまいました。 var heavyFunc = function () { for(var i = 0; i < 100000; i++) new Date(); } var startTime = +new Date(); var callCount = 0; var testFunc = function (x) { heavyFunc(); // (1) if (++callCount < 5) setTimeout(testFunc, 100); else alert(+new Date() - startTime); //heavyFunc(); // (2) }; testFunc(); heavyFuncという重い処理を、setTimeoutの前後のどちらに置くかという実験コードです。 setTimeoutのタイマー処理がFirefoxのように別スレッドで実行されているのであれば、 先にsetTimeoutを呼び出してからheavyFuncを実行した方が速く処理が完了するだろう、という想定です。 そして結果は、FirefoxだけでなくIEとChromeでも先にsetTimeoutを呼んだ方が速い、となりました。 結局どのブラウザも専用のタイマースレッドを実装しており、 alert関数が特殊（タイマースレッドもブロックする）なだけ、ということなのでしょうか？ それとも私が何か見落としているのでしょうか。
- ベストアンサー
- JavaScript
- 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>
- 締切済み
- JavaScript
- javascriptで印刷ダイアログを出力すると同時に
javascriptで印刷ダイアログを出力すると同時に setTimeouで一定時間後にアラートを表示していたのですが、 IE8では印刷ダイアログが表示されている時はタイマーが止まってしまうようです。 また、IE6では動作しました。 なにか解決方法はないでしょうか？ 以下がサンプルソースです。 <html> <head> <title>setTimeout</title> <script type="text/javascript"> function aaa() { alert("タイムアウトしました。"); } function func() { setTimeout("aaa()", 5000); window.print(); } </script> </head> <body onload="func()"> aaa </body> </html>
- 締切済み
- JavaScript
- javascriptで月ごとに祭日を表示させたい
javascriptは全くの素人で、どう質問して良いかもよく分かりませんが、よろしくお願いします。 神社のホームページを作成中で、ＴＯＰページに毎月の祭日をjavascriptで表示させたいのですが、全くわかりません。 祭日は毎月「旧暦の3日」です。月が替わるごとに「今月の祭日は”○×日”です」という風に表示させたいのですが、それが可能ならスクリプトを教えてください。尚、フリーのスクリプトを利用して、現時点の旧暦は下の記述で表示できました。 （ＤＬしたフリーの外部jsファイルを読み込ませています。） <script type="text/javascript" > <!-- var date = new Date(); var kr = new kyureki(date.getJD()); document.write( "きょうは旧暦の" + " " + kr.month + "月" + kr.day + "日" + "（ " + kr.rokuyo + " ）" + "にあたります。" + "<br />" ); //--> </script> このkr.dayを利用して、新暦の祭日を表示できればと思います。どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptで質問
javascript初心者です。 日付で自動的に変わるようなメニューが作りたいのですが もっとシンプルに簡潔にできますか？ また、開いているページのタブの色を他と変えたいのですができますか？ 以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript"> <!-- var day01 = new Date(); var year01 = day01.getFullYear(); //年 var mon01 = day01.getMonth() + 1; //月 var date01 = day01.getDate(); //日 var day02 = new Date(); day02.setDate( day02.getDate()+1 ); var year02 = day02.getFullYear(); //年 var mon02 = day02.getMonth() + 1; //月 var date02 = day02.getDate(); //日 var day03 = new Date(); day03.setDate( day03.getDate()+2 ); var year03 = day03.getFullYear(); //年 var mon03 = day03.getMonth() + 1; //月 var date03 = day03.getDate(); //日 var day04 = new Date(); day04.setDate( day04.getDate()+3 ); var year04 = day04.getFullYear(); //年 var mon04 = day04.getMonth() + 1; //月 var date04 = day04.getDate(); //日 var day05 = new Date(); day05.setDate( day05.getDate()+4 ); var year05 = day05.getFullYear(); //年 var mon05 = day05.getMonth() + 1; //月 var date05 = day05.getDate(); //日 var day06 = new Date(); day06.setDate( day06.getDate()+5 ); var year06 = day06.getFullYear(); //年 var mon06 = day06.getMonth() + 1; //月 var date06 = day06.getDate(); //日 var day07 = new Date(); day07.setDate( day07.getDate()+6 ); var year07 = day07.getFullYear(); //年 var mon07 = day07.getMonth() + 1; //月 var date07 = day07.getDate(); //日 // --> </script> </head> <body> <ul class="menu"> <script type="text/javascript"> <!-- document.write('<li><a href="'+year01+mon01+date01+'.html">'+mon01+'月'+date01+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year02+mon02+date02+'.html">'+mon02+'月'+date02+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year03+mon03+date03+'.html">'+mon03+'月'+date03+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year04+mon04+date04+'.html">'+mon04+'月'+date04+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year05+mon05+date05+'.html">'+mon05+'月'+date05+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year06+mon06+date06+'.html">'+mon06+'月'+date06+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year07+mon07+date07+'.html">'+mon07+'月'+date07+'日'+'</a></li>'); //--> </script> </ul> </body> </html>
- 締切済み
- JavaScript
お礼
ありがとうございました。 ご教授いただいた方法で実現できました。 手元の本に「getDate、setDateの範囲は1～31」と明記してあったため、それを真に受けてそれ以外の範囲の数値は設定できないものだと勝手に思い込んでおりました。 実施してみたところ、うまくいきました。本当に失礼しました。
補足
setDate関数の範囲は1～31までかと………