質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2430閲覧

お届け日を設定するJSの改善点

margin

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/11/25 01:33

編集2016/11/25 05:54

簡単なECサイトを作るために、勉強をしているものです。質問というか改善点などを教えて頂きたく今回質問させてください。

現在発注関連でお届け日を自動でWEBサイトに表示するJSを考えています。下記がコードです。

<div id="time"></div> <div id="todoke_day"></div> <script type="text/javascript"> setInterval(function(){ var date = new Date(); var month = ('0' + (date.getMonth() + 1)).slice(-2); var day = ('0' + date.getDate()).slice(-2); var hour = ('0' + date.getHours()).slice(-2); var minute = ('0' + date.getMinutes()).slice(-2); var second = ('0' + date.getSeconds()).slice(-2); var mili = ('0' + date.getMilliseconds()).slice(-2); var str ='<span class="timer-ttl">ただ今の注文</span><span class="today">'+month+'/'+day+'</span><span class="timer">'+hour+':'+minute+':'+second+':'+mili+'</span>'; document.getElementById("time").innerHTML = str; },0) var date2 = new Date(); var flagDay = new Date(date2.getFullYear(), date2.getMonth() + 1, 0).getDate(); var flagHour = date2.getHours(); var today = date2.getDate(); var month = date2.getMonth()+1; var today = date2.getDate(); if (today < flagDay){//現在が月末ではない if(today+2 <= flagDay) {//19時過ぎたときの届け日が月末を超えないとき if(flagHour < 19){ console.log(today); var msg = month+"/"+(today+1); } else if (flagHour > 19) { var msg = month+"/"+(today+2); } } else if(today+2 > flagDay){//19時過ぎたときの届け日が月末を超えるとき if(flagHour < 19){ var msg = month+"/"+(today+1); } else if (flagHour > 19) { var msg = date2.setMonth(dates.getMonth()+1)+"/"+date2.setDate(1); } } } else if(today = flagDay){//現在が月末の時 if(flagHour < 19){ var msg = date2.setMonth(dates.getMonth()+1)+"/"+date2.setDate(1); } else if (flagHour > 19) { var msg = (date2.setMonth(dates.getMonth()+1)+1)+"/"+(date2.setDate(1)+1); } } document.getElementById("todoke_day").innerHTML = msg; </script>

自分で書いていて物凄くわかりづらいコードだと思います。概要を説明します。
id=timeには常に現在の日付と時間を表示しています。時間はミリ秒まで表示してデジタル時計のような雰囲気を出したいと思っています。

問題はid=todoke_dayに表示するJSです。ここには現在の日付の次の日を表示するようにします。ただここで条件があります。

①19時を超えるまでは、次の日を表示。
②19時を超えたら、2日後を表示する。
例で言いますと、今日が25日なら19時までは26日を表示し、19時を超えたら27日を表示したいと思っています。
これは配送の締め切り時間でこのようにしています。

問題は、次の日を表示するときに月がかわってしまうときです。11月の月末は30日というの取得することはできました。これを判定に使って、月がかわったときを上手く表示しようと思いました。

このコードの改善点があれば、教えて頂きたいと思います。まだ動作の確認はすべて終わってないですが、もっとシンプルなやり方があるのではないかと、模索中です。お力をお貸しください。

追記 下記のようにコードを変更しました。教えて頂きありがとうございます。

<div id="time"></div> <div id="todoke_day"></div> <script type="text/javascript"> setInterval(function(){ var date = new Date(); var month = ('0' + (date.getMonth() + 1)).slice(-2); var day = ('0' + date.getDate()).slice(-2); var hour = ('0' + date.getHours()).slice(-2); var minute = ('0' + date.getMinutes()).slice(-2); var second = ('0' + date.getSeconds()).slice(-2); var mili = ('0' + date.getMilliseconds()).slice(-2); var str ='<span class="timer-ttl">ただ今の注文</span><span class="today">'+month+'/'+day+'</span><span class="timer">'+hour+':'+minute+':'+second+':'+mili+'</span>'; document.getElementById("time").innerHTML = str; },0); function format_date(d){ return (d.getMonth()+101).toString().substr(1,2)+"/"+(d.getDate()+100).toString().substr(1,2); } var d=new Date(); var hour = d.getHours(); console.log('時間:'+hour); if (hour < 19){ d.setDate(d.getDate()+1); var msg = format_date(d); } else if ( hour >= 19) { d.setDate(d.getDate()+2); var msg = format_date(d); } document.getElementById("todoke_day").innerHTML = msg; </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

月末日が31日なら32日を指定すれば翌月1日になります
以下、12/31に1日足すと翌年の1/1になります

javascript

1var d=new Date('2016-12-31'); 2d.setDate(d.getDate()+1) 3console.log(d)

追記

月日のみ表示

javascript

1<script> 2function format_date(d){ 3return (d.getMonth()+101).toString().substr(1,2)+"/"+(d.getDate()+100).toString().substr(1,2); 4} 5var d=new Date('2016-12-31'); 6console.log(format_date(d)); 7d.setDate(d.getDate()+1); 8console.log(format_date(d)); 9</script> 10

投稿2016/11/25 01:43

編集2016/11/25 04:06
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

margin

2016/11/25 01:56

setDateを使えば、+1でも32日とかではなく1月1日とかになるんですね。こっちを上手く使う方向がいいのですね。
margin

2016/11/25 03:46

setDateなど使った場合に月日だけを取得は可能でしょうか?年や時間まで取得してしまうので困っています。
yambejp

2016/11/25 04:06

日付の整形について適宜おこなってください サンプルつけときました
margin

2016/11/25 04:14

ありがとうございます!!独学でやっているもので、このように他の人に教わる機会がなくて、大変貴重な経験でした。あとは分岐条件を頑張って書こうと思います。その時、時間がありましたら見て意見を聞かせてくれると嬉しいです。
margin

2016/11/25 05:51

追記で変更したものを書いてみました。後学のためにもう一つ教えて頂きたいのですが、 d.getMonth()+101).toString().substr(1,2)+"/"+(d.getDate()+100).toString().substr(1,2); はなぜ101と100を付け加えているのでしょうか?自分で調べてみたのですが、上手く消化できませんでした。もしよろしければ教えてください。
yambejp

2016/11/25 05:57

d.getMonth()は、月マイナス1の値を返すんですよ 1月は0、2月は1・・・12月は11です。 なので1足す処理が必要になります。 ご理解いただいているとは思いますが100を足しているのは二桁に整形するためです。
margin

2016/11/25 06:05

ありがとうございます。理解できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問