○歳の誕生日まであと何日 JavaScript

ある時刻まで何日なのか簡単に知りたい必要性があったので作ってみました。

Contents [hide]

1 HTML部分
2 JavaScript部分

HTML部分

HTML部分を示します。ボタンをクリックするとテキストボックスに入力されている値から対象の時刻までの日数と時間を取得します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○歳の誕生日まであと何日？</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        background-color: #000;
        color: #fff;
        font-weight: bold;
    }
    #ret {
        color: #f00;
    }
    #now {
        color: #ff0;
    }
    .birth {
        width: 80px;
    }
</style>
</head>

<body>
    <p>生年月日 <input id = "year" class = "birth">年 <input id = "month" class = "birth">月 <input id = "day" class = "birth">日</p>
    <p>年齢 <input id = "age" class = "birth"></p>
    <button onclick="Calc()" class = "birth">計算</button>
    <p id = "ret"></p>
    <p>現在時刻は <span id = "now"></span> です。</p>

    <script src = "./app.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>○歳の誕生日まであと何日？</title>

<style>

body {

background-color: #000;

color: #fff;

font-weight: bold;

}

#ret {

color: #f00;

}

#now {

color: #ff0;

}

.birth {

width: 80px;

}

</style>

</head>

<body>

<p>現在時刻は <span id = "now"></span> です。</p>

</body>

</html>

JavaScript部分

以下は現在時刻を表示するための関数です。

app.js

function ShowNowTime(){
    let now = new Date(); // 現在時刻

    let hours = now.getHours();
    if(hours < 10)
        hours = '0' + hours; // 常に2桁で表示する
    let minutes = now.getMinutes();
    if(minutes < 10)
        minutes = '0' + minutes;
    let seconds = now.getSeconds();
    if(seconds < 10)
        seconds = '0' + seconds;
    let nowText = `${now.getFullYear()}年 ${now.getMonth() + 1}月 ${now.getDate()}日  ${hours}：${minutes}：${seconds}`;
    document.getElementById('now').innerHTML = nowText;
}

function ShowNowTime(){

let now = new Date(); // 現在時刻

let hours = now.getHours();

if(hours < 10)

hours = '0' + hours; // 常に2桁で表示する

let minutes = now.getMinutes();

if(minutes < 10)

minutes = '0' + minutes;

let seconds = now.getSeconds();

if(seconds < 10)

seconds = '0' + seconds;

let nowText = `${now.getFullYear()}年 ${now.getMonth() + 1}月 ${now.getDate()}日 ${hours}：${minutes}：${seconds}`;

document.getElementById('now').innerHTML = nowText;

}

計算ボタンがクリックされたらテキストボックスから値を取得して計算をおこないます。このとき数字以外のものが入力されている場合は’入力された値が不正です’と表示させます。

どのテキストボックスにも数字のみが入力されている場合、現在時刻から○歳の誕生日（生年月日の○年後）までの時間を計算します。年齢、対象となる時刻、計算可能かを示す変数は他の関数でも使うのでグローバル変数にしています。

let age = 0;
let endTime = null; // 対象となる時刻
let canCalc = false; // そもそも計算可能か？不正な値が入力されていないか？

function Calc(){
    let birthYear = Number(document.getElementById('year').value);
    let birthMonth = Number(document.getElementById('month').value);
    let birthDay = Number(document.getElementById('day').value);
    age = Number(document.getElementById('age').value);

    if(isNaN(birthYear) || isNaN(birthMonth) || isNaN(birthDay) || isNaN(age)){
        document.getElementById('ret').innerHTML = '入力された値が不正です';
        canCalc = false;
        return;
    }

    endTime = new Date(birthYear + age, birthMonth - 1, birthDay, 0,0,0); // 誕生日の0時0分0秒にセット
    canCalc = true;
    ShowResult();
}

let age = 0;

let endTime = null; // 対象となる時刻

let canCalc = false; // そもそも計算可能か？不正な値が入力されていないか？

function Calc(){

let birthYear = Number(document.getElementById('year').value);

let birthMonth = Number(document.getElementById('month').value);

let birthDay = Number(document.getElementById('day').value);

age = Number(document.getElementById('age').value);

if(isNaN(birthYear) || isNaN(birthMonth) || isNaN(birthDay) || isNaN(age)){

document.getElementById('ret').innerHTML = '入力された値が不正です';

canCalc = false;

return;

}

endTime = new Date(birthYear + age, birthMonth - 1, birthDay, 0,0,0); // 誕生日の0時0分0秒にセット

canCalc = true;

ShowResult();

}

現在時刻から○歳の誕生日（生年月日の○年後）までの時間を計算し表示する関数を示します。

function ShowResult(){
    let now = new Date(); // 現在時刻

    let difference = endTime - now; // 差がミリ秒で取得されるので1000で割って単位を秒にする
    let sec = Math.floor(difference / 1000);
    let days = Math.floor(sec / 3600 / 24);
    let hours = Math.floor(sec / 3600) % 24;
    let minutes = Math.floor(sec / 60) % 60;
    let seconds = sec % 60;

    let ret = `${age}歳の誕生日まで ${days}日 ${hours}時間  ${minutes}分 ${seconds}秒`;

    if(difference >= 0)
        document.getElementById('ret').innerHTML = ret;
    else
        document.getElementById('ret').innerHTML = 'すでに経過しています。';
}

function ShowResult(){

let now = new Date(); // 現在時刻

let difference = endTime - now; // 差がミリ秒で取得されるので1000で割って単位を秒にする

let sec = Math.floor(difference / 1000);

let days = Math.floor(sec / 3600 / 24);

let hours = Math.floor(sec / 3600) % 24;

let minutes = Math.floor(sec / 60) % 60;

let seconds = sec % 60;

let ret = `${age}歳の誕生日まで ${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`;

if(difference >= 0)

document.getElementById('ret').innerHTML = ret;

else

document.getElementById('ret').innerHTML = 'すでに経過しています。';

}

動作確認はこちらから

○歳の誕生日まであと何日 JavaScript

HTML部分

JavaScript部分

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ