今日はあなたの人生が始まってから何日目ですか？
誕生日を入力してくださいm(_ _)m
計算！
今回のコード
html
|
1 2 3 |
<div><input id="birthday" type="text" placeholder="1992-01-01" /> <div id="keisan_btn" class="disabled btnactive">計算！</div> <div id="ans" style="display: none;">今日はあなたの人生の<span id="ansday">？？？</span>日目です！ |
１行目のinputタグで誕生日入力用のエリアを作成し、
２行目で計算用のボタンを表示、
３行目で結果(生まれてから何日か)を表示しています。
ちなみに３行目は「style=”display: none;」とすることで
非表示となっているためボタンを押すまでは見えないようにしています。
jQuery
jQuery部分のコードです。
ボタンを押したときの動作を記載しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//日付計算用ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー jQuery('#keisan_btn').on('click', function(){ var birthday = jQuery('#birthday').val().split('-'); // 日付オブジェクトの作成 var d1 = new Date(birthday[0], birthday[1]-1, birthday[2]); var d2 = new Date(); // 日数の計算 var diff = d2.getTime() - d1.getTime(); var daysPast = Math.floor(diff / (1000 * 60 * 60 * 24))+1; // テキストの変更 jQuery('#ansday').text(daysPast); jQuery('#ans').show(); }); |
|
1 2 |
jQuery('#keisan_btn').on('click', function(){ var birthday = jQuery('#birthday').val().split('-'); |
1-2行目部分です。
1行目でクリック時処理の宣言、
2行目では入力した誕生日を”-”で分割しています。(split)
つまり「1992-11-22」と入力すると「1992」「11」「22」が
birthdayに格納されるということですね。
|
1 2 3 4 5 6 7 |
// 日付オブジェクトの作成 var d1 = new Date(birthday[0], birthday[1]-1, birthday[2]); var d2 = new Date(); // 日数の計算 var diff = d2.getTime() - d1.getTime(); var daysPast = Math.floor(diff / (1000 * 60 * 60 * 24))+1; |
5-11行目部分です。
誕生日と現在日付を取得し、その差分の時間を計算しています。
今回は生まれた日を1日目としたかったので、
最後にプラス１をしています。
|
1 2 3 |
// テキストの変更 jQuery('#ansday').text(daysPast); jQuery('#ans').show(); |
14-15行目部分です。
計算した日数を「id=”ansday”」のテキスト部分に埋め込み、
最後に隠していたhtmlの3行目を表示しています。
まとめ
今回は取得した入力値を変換し、それを再度埋め込むといった
基本の部分を勉強してみました。
エラー処理等はまったく入れていないので
想定外の値が入力された場合には対応していません。。
おいおい直していけたらと思います。
ミニクイズコーナー
解説
コメントを残す