JavaScriptで生年月日から年齢を計算する簡単ロジック clockmaker Follow 2017-03-09 20:05:46 License: MIT License Fork2 Fav0 View1350 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 26 lines HTML 28 lines CSS 6 lines JavaScriptで生年月日から年齢を計算する簡単ロジック http://qiita.com/clockmaker/items/865ceafae7117606169a JavaScriptで生年月日から年齢を計算する簡単ロジック 'use strict'; const inputElement = document.querySelector('#yourBirthday'); inputElement.addEventListener('change', (event) => { // ゼロパディングするための関数 const paddingZero = (num, digit) => ('0000' + num).slice(-1 * digit); // あなたの誕生日 const birth = new Date(inputElement.value); // ここに誕生日を書いてください const y2 = paddingZero(birth.getFullYear(), 4); const m2 = paddingZero(birth.getMonth() + 1, 2); const d2 = paddingZero(birth.getDate(), 2); // 今日の日付 const today = new Date(); const y1 = paddingZero(today.getFullYear(), 4); const m1 = paddingZero(today.getMonth() + 1, 2); const d1 = paddingZero(today.getDate(), 2); const age = Math.floor((Number(y1 + m1 + d1) - Number(y2 + m2 + d2)) / 10000); document.querySelector('#yourAge').innerHTML = `You are ${age} years old.`; }); <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <div class="demo-card-square mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">Please Input Your Birthday</h2> </div> <div class="mdl-card__supporting-text"> <!-- Numeric Textfield with Floating Label --> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="^(\d{4})(/|-)(0[1-9]|1[0-2])(/|-)(0[1-9]|[12][0-9]|3[01])$" id="yourBirthday"> <label class="mdl-textfield__label" for="yourBirthday">Your Birthday...</label> <span class="mdl-textfield__error">Input as 1983-02-16</span> </div> </div> <div class="mdl-card__title mdl-card--expand"> <h4 id="yourAge"> </h4> </div> </div> <p id='helloWorld'></p> JavaScriptで生年月日から年齢を計算する簡単ロジック body { background: #00B0FF; display:flex; justify-content: center; align-items : center; } # JavaScriptで生年月日から年齢を計算する簡単ロジック http://qiita.com/clockmaker/items/865ceafae7117606169a 'use strict'; const inputElement = document.querySelector('#yourBirthday'); inputElement.addEventListener('change', (event) => { // ゼロパディングするための関数 const paddingZero = (num, digit) => ('0000' + num).slice(-1 * digit); // あなたの誕生日 const birth = new Date(inputElement.value); // ここに誕生日を書いてください const y2 = paddingZero(birth.getFullYear(), 4); const m2 = paddingZero(birth.getMonth() + 1, 2); const d2 = paddingZero(birth.getDate(), 2); // 今日の日付 const today = new Date(); const y1 = paddingZero(today.getFullYear(), 4); const m1 = paddingZero(today.getMonth() + 1, 2); const d1 = paddingZero(today.getDate(), 2); const age = Math.floor((Number(y1 + m1 + d1) - Number(y2 + m2 + d2)) / 10000); document.querySelector('#yourAge').innerHTML = `You are ${age} years old.`; }); <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <div class="demo-card-square mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">Please Input Your Birthday</h2> </div> <div class="mdl-card__supporting-text"> <!-- Numeric Textfield with Floating Label --> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" pattern="^(\d{4})(/|-)(0[1-9]|1[0-2])(/|-)(0[1-9]|[12][0-9]|3[01])$" id="yourBirthday"> <label class="mdl-textfield__label" for="yourBirthday">Your Birthday...</label> <span class="mdl-textfield__error">Input as 1983-02-16</span> </div> </div> <div class="mdl-card__title mdl-card--expand"> <h4 id="yourAge"> </h4> </div> </div> <p id='helloWorld'></p> body { background: #00B0FF; display:flex; justify-content: center; align-items : center; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? # JavaScriptで生年月日から年齢を計算する簡単ロジック http://qiita.com/clockmaker/items/865ceafae7117606169a Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author clockmaker URLhttp://clockmaker.jp/ FlashやHTML5を中心に活動するテクニカルディレクター / インタラクティブデベロッパー 株式会社ICS代表 / 筑波大学非常勤講師 Twitter (JP) : http://twitter.com/clockmaker Twitter (EN) : http://twitter.com/clockmaker_en Blog (JP) : http://clokcmkaer.jp/blog Blog (EN) : http://clokcmkaer.jp/blog-en Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/08or/js"></script> application javascript Discussion Questions on this code? Tags application javascript Forked sort by latest page views favorite forked forked: JavaScriptで生年月日から年齢を計算 nobukazu 10 129 27/28/6 application javascript forked: JavaScriptで生年月日から年齢を計算 hoge1e4 00 213 40/36/6 application javascript
