■■■ 根本的な間違い ■■■ ──────────────── 入力した日付までDate.now();で取得した今の時間からあと何日あるかの プログラムを組みたい ──────────────── まず Javascript は、 他のプログラム上で動作して、 プログラムの動作をコントロールしたり拡張機能を追加するための、 「スクリプト」を記述するための「スクリプト言語」。 コンパイル、ビルドしてプログラムを作成するような 「プログラム言語（プログラミング言語）」ではないから、 「プログラム」は作れない。 ということで、 ──────────────── 入力した日付までDate.now();で取得した今の時間からあと何日あるかの スクリプトを記述したい ──────────────── という内容の質問だとして回答する。 ■■■ 実施例 ■■■ 解説の前に、 まず全体のソースコードの実施例を示しておく。 ──────────────── <form onsubmit="return false"> <!-- ── 日付指定 ── --> <section> <input name="date" type="date"> <input type="button" value="まであと何日？" onclick=" // 日付けテキスト const dtext = this.form.date.value ? this.form.date.value.replace( /-/g, '/' )+' 00:00:00' : Date.now() ; // 目標日までの時間（ミリ秒） const time = new Date( dtext ).getTime() - Date.now(); // 残り日数・時間・分を計算 const days = ( time<0 ) ? 0 : Math.floor( time/( 1000*60*60*24 ) ); const hours = ( time<0 ) ? 0 : Math.floor( time/( 1000*60*60 ) )%24; const mins = ( time<0 ) ? 0 : Math.floor( time/( 1000*60 ) )%60; // 表示 document.getElementById( 'output' ).textContent = 'あと '+days+' 日 '+hours+' 時間 '+mins+' 分 '; "> </section> <!-- ── 残日数表示 ── --> <section id="output"></section> </form> ──────────────── ■■■ 解説 ■■■ 【 HTML 】 HTML としては、 <form> 要素の中に、 目標日の日付けを入力する <input type="date"> と、 目標日までの残日数を表示するボタン <input type="button"> を １つの <section> でまとめておいて、 残日数の表示先として、 もう一つの <section> を用意しておく。 ──────────────── <form> <section> <input name="date" type="date"> <input type="button" value="まであと何日？"> </section> <section id="output"></section> </form> ──────────────── 【 Javascript 】 この状態で、 ボタン <input type="button"> の onclick 属性に、 ボタンを押した際に実行する Javascript のコードを指定する。 ──────────────── <input type="button" value="まであと何日？" onclick=" ～ ここに Javascript コード ～ "> ──────────────── 注意として、 onclick 属性はダブルクォーテーション "～" で囲っているんで、 属性内に記述するスクリプトでダブルクォーテーションは使えない。 文字列の囲いなどはシングルクォーテーション '～' を使うようにする。 以下、Javascript コードの説明。 【 取得した日付けを変換 】 ボタン要素の onoclick 属性の中では、 そのボタン要素を囲っている <form> 要素は this.form で参照できるから、 <input name="date"> の値は this.form.date.value で取得できる。 取得した日時データは、 日程が入力（選択）されていない場合は空白文字列 '' となり、 日程が入力（選択）されている場合は、 ──────────────── 年-月-日 ──────────────── のようなフォーマットで取得できる。 取得した日時データは、 その日時までの時間を計算するために、 new Date() の引数として渡す必要があるんで、 未入力のときの空白文字列 '' や、 入力時の「年-月-日」のフォーマットから、 new Date() の引数として受付可能なフォーマットに 変換しないといけない。 今回は、 日付けが入力されている「年-月-日」の場合は、 new Date() が受付可能な「年/月/日 00:00:00」の形に変換し、 未入力の空文字 '' の場合は、 newDate() に渡せる現在の時刻 Date.now() に変換する。 ──────────────── const dtext = this.form.date.value ? this.form.date.value.replace( /-/g, '/' )+' 00:00:00' : Date.now() ; ──────────────── 【 目標日までの時間 】 上記で変換した日付テキスト dtext を、 new Date() の引数として渡せば、 <input name="date"> で入力された日時の日付オブジェクトが得られ、 その getTime() メソッドを実行すれば、 それは入力された日時をミリ秒で表した「時刻」になる。 ──────────────── new Date( dtext ).getTime() ──────────────── この「時刻」から、 現在の「時刻」である Date.now() を引けば、 目標日までの時間（ミリ秒）が得られる。 ──────────────── const time = new Date( dtext ).getTime() - Date.now(); ──────────────── 【 ミリ秒から日数に換算 】 上記で求めた残りの時間（ミリ秒）から、 残りの日数に換算する。 ミリ秒を日数に換算するには、 ──────────────── 1000( ミリ秒／秒 )×60( 秒／分 )×60( 分／時 )×24( 時／日 ) ──────────────── で割ればいい。 Javascript のコードで書くと、 ──────────────── const days = Math.floor( time/( 1000*60*60*24 ) ); ──────────────── もし、 指定された日がすでに過ぎた日付けだった場合は、 残り日数は 0 日と表示するものとする。 ──────────────── const days = ( time<0 ) ? 0 : Math.floor( time/( 1000*60*60*24 ) ); ──────────────── 残り日数を「あと○日○時間○分」と表示するために、 同様にして時 hours と分 mins も換算する。 ──────────────── const hours = ( time<0 ) ? 0 : Math.floor( time/( 1000*60*60 ) )%24; const mins = ( time<0 ) ? 0 : Math.floor( time/( 1000*60 ) )%60; ──────────────── 【 残日数を表示 】 あとは、 求めた各値を使って表示欄 <section id="output"> に書き出すだけ。 ──────────────── document.getElementById( 'output' ).textContent = 'あと '+days+' 日 '+hours+' 時間 '+mins+' 分 '; ────────────────