【JS】カウントダウン

by tea4two

HTML

<link rel="stylesheet" href="http://reset5.googlecode.com/hg/reset.min.css">
<article id="container">
     <h1>Countdown Timer</h1>

    <div id="inner">
        <div id="inputArea"></div>
        <p id="timer">0:00</p>
    </div>
</article>

CSS

#container {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #dedede;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4) box-shadow: 0 0 5px rgba(0, 0, 0, .4)
}
#container h1 {
    background-color: #dedede;
    padding: .5em;
    font-weight: bold;
    font-size: 120%;
    text-shadow: 1px 1px 0 #fff;
    color: #333;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#inner {
    padding: 1em;
}
#inputArea {
    margin-bottom: 1em;
}
#timer {
    font-size: 30px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

JavaScript

//グローバル変数（あとで値をストアする）
var secondsRemaining, intervalHandle;

/*  3. ファンクション
    カウントダウンが終了した時に id="inputArea"を表示させる
-----------------------------------*/
function resetPage() {
    document.getElementById('inputArea').style.display = 'display';    
}

/* 2. ファンクション
   タイマーとしてつかう
-----------------------------------*/
function tick() {
    //id="timer"をつかむ
    var timeDisplay = document.getElementById('timer');
    
    //秒を mm:ss のフォーマットに変換
    var min = Math.floor(secondsRemaining / 60);
    var sec = secondsRemaining - (min * 60);
    
    //秒数を01,02,...18 のように2桁の表示にするフィルター的な。
    if ( sec < 10 ) {
        sec = '0' + sec;
    }
    
    //コロン（:）で連結する
    var message = min + ':' + sec;
    //表示を変える
    timeDisplay.innerHTML = message;
    
    //0まで到達したらストップする
    if ( secondsRemaining === 0 ) {
        alert('タイムアップ！');
        clearInterval(intervalHandle);
        resetPage();
    }
    //デクリメントを使い1秒ずつ引いていく
    secondsRemaining--;
}

/* 1. ファンクション
   カウントダウンスタート用
-----------------------------------*/
function startCountdown() {
    //inputに挿入された値を変数minutesにストアする
    var minutes = document.getElementById('minutes').value;
    
    //数字かどうかチェックする
    if( isNaN(minutes) || minutes.length === 0 ) {
        alert('半角数字を入れてください。');
        return;//処理をストップ
    }
    
    //何秒かチェックする
    secondsRemaining = minutes * 60;
    
    //1000ミリ秒つまり1秒毎にtick()を実行する
    //intervalHandleにはインターバルIDがストアされる。それをあとでclearする。
    //setInterval内のファンクションに()を付けない理由はEvernoteに。
    intervalHandle = setInterval(tick, 1000);
    console.log(intervalHandle);
    
    //inputの入ったDIVを非表示にする
    document.getElementById('inputArea').style.display = 'none';
}

//ページ(window)がロードされたら実行する
window.onload = function() {
    //input要素を生成し、IDとtypeの設定を行う
    var inputMinutes = document.createElement('input');
    inputMinutes.setAttribute('id','minutes');
    inputMinutes.setAttribute('type','text');
    
    //次にボタンの作成
    var startButton = document.createElement('button');
    var buttonText =...