完成形のイメージ

日本人の平均男性が80歳ぐらいまで生きると想定し、
自分の年齢を入力して余生を日数ではなく時間単位でカウントダウン表示する

実装したい機能を言葉にしよう

   0             1             2            3           4
   |=============|=============|============|===========|
 スタート　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　現時点　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　終了

   (---------------------カウントされる時間-------------------)

   (---現時点まで経過した時間------)(---タイマーに表示させる時間---)

今回考えなければならないことは "タイマーにどうやって時間を表示させるか"なので

上記の図を見てもらうと以下のように計算することで欲しい値を出力できることがわかった。

"カウントされる時間" - "現時点までの時間" = "タイマーに表示したい残り時間"

普通のカウントダウンタイマーに必要な機能

1 : カウントが0になったらタイマーが止まるようにする
2 : カウント時間を設定できるようにする
3 : リセットボタンをアクティブにする
4 : 一時停止、再開ができるようにする
5 : カウントダウン中に操作ができないようにする

スタートしたらカウントダウンが始まるようにする。

自分用補足)

スタートボタンを押してから何分経過したか = 現在時刻 - スタートボタンを押した時間
残り時間 = カウントされる時間 - (現在時刻 - スタートボタンを押した時間)

life_timer.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charaset="utf-8">
<title>LIFE TIMER</title>
</head>
<body>
    <div id="timer">00:00:000</div>
    <div id="controls">
        <button id="min">Min</button>
        <button id="sec">Sec</button>
        <button id="reset">Reset</button>
        <button id="start">start</button>
    </div>
    <script src="life_timer.js"></script>
</body>

</html>

life_timer.js

//即時関数で囲う
(function(){

    //厳密なエラーチェックのための記述
    'use strict'; 

    var timer = document.getElementById('timer');
    var min = document.getElementById('min');
    var sec = document.getElementById('sec');
    var reset = document.getElementById('reset');
    var start = document.getElementById('start');

    //スタートタイムを押した時の時間を入れる変数
    var startTime;

    //残り時間を計算するための変数
    var timeLeft;

    //とりあえず4秒で設定しておく。 現在時刻と表示形式を合わせるために * 1000
    var timeToCountDown = 4 * 1000;


    //残り時間を表示するためにミリ秒を渡すと分とか秒に直してくれる関数を作る
    function updateTimer(t){

    //引数として渡されたtでデータオブジェクトを作りたいので変数dという変数名で作ってみる
    var d = new Date(t);

    var m = d.getMinutes();
    var s = d.getSeconds();
    var ms = d.getMilliseconds();
    m = ('0' + m).slice(-2);
    s = ('0' + s).slice(-2);
    ms = ('00' + ms).slice(-3);
    timer.textContent =  m + ':' + s + ':' + ms;

    }


    function countDown(){

        //setTimeoutを使って次の処理を10ミリ秒後に実行するようにする
        setTimeout(function(){

        //残り時間 = カウントされる時間 - 現在時刻
        timeLeft = timeToCountDown - (Date.now() - startTime);

        //countDownを再帰的に呼び出すためのに記述

        updateTimer(timeLeft)
        countDown();

       //1秒以下の時間も表示されるようにする
        },10);
    }

    //startを押した際に発火するイベント
    start.addEventListener('click',function(){
        startTime = Date.now();

        //カウントダウンの機能は再帰的に実行したいのでcountDown関数を入れとく
        countDown();
    });
})();

その他機能も実装