JavaScript の Date オブジェクトで一日をカウントダウンするプログラムを書いてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

以前書いた,『 『リッチマン、プアウーマン』のデスメールカウントダウン演出を再現してみた』で作成したサンプルから, 一日の残り時間を取得する部分を抜き出してみました.

単純に一日の残り時間を表示してカウントダウンするだけの単純なサンプルです.

Demo jsdo.it Download

Table of contents

Tips – 経過時間の取得処理

経過時間の取得処理について細かく見て行きましょう.

/*
 * const
 */
var DAY = 60*60*60;


/*
 * 一日の残り時間を取得
 */
var getDailyLimit = function() {
    var now     = new Date();
    
    var hours   = now.getHours() * 3600;        // 時→秒
    var minutes = now.getMinutes() * 60;        // 分→秒
    var seconds = now.getSeconds();                             // 秒
    var elapsed_time = (hours+minutes+seconds); // 経過時間
    var limit_time   = DAY - elapsed_time;      // 明日までのリミット
    
    return limit_time;
};

ホント単純なことしかやっていません.

  1. まず, の情報を持った Date オブジェクトを var now = new Date(); で取得します.
  2. Date のメソッド getHours(), getMinutes(), getSeconds() で時分秒それぞれの秒数を求めます.
  3. 2で求めた値を合計して, 経過時間を求める
  4. 一日の秒数 DAYから 3で求めた経過時間分を引く

こんな感じです.

up

Code – デイリーカウントダウン

今回のサンプルコードをひと通り載せておきます.

HTML : index.html

tmlib.js と less を使うための準備と, カウントダウンを表示するための要素を作成を行なっています.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <title>Daily Countdown</title>
        <link rel="apple-touch-icon-precomposed" href="icon.png" />
        
        <link rel="stylesheet/less" type="text/css" href="style.less" />
        <script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>
        
        <script src="https://raw.github.com/phi1618/tmlib.js/0.1.2/build/tmlib.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
        <div id="main">
            Daily Countdown: <span class="time"></span> minutes
        </div>
    </body>
</html>

JavaScript : main.js

一日の残り時間を取得する関数を定義し, その関数の実行結果を毎フレーム要素にセットしています.

/*
 * const
 */
var DAY = 60*60*60;


/*
 * 一日の残り時間を取得
 */
var getDailyLimit = function() {
    var now     = new Date();
    
    var hours   = now.getHours() * 3600;        // 時→秒
    var minutes = now.getMinutes() * 60;        // 分→秒
    var seconds = now.getSeconds();                             // 秒
    var elapsed_time = (hours+minutes+seconds); // 経過時間
    var limit_time   = DAY - elapsed_time;      // 明日までのリミット
    
    return limit_time;
};


/*
 * main
 */
tm.main(function() {
    // 表示更新
    var eTime = tm.dom.Element("#main .time");  // 要素取得
    eTime.html = getDailyLimit();               // 残り時間をセット
    
    // ループ処理をセット
    tm.setLoop(function() {
        // 表示更新
        eTime.html = getDailyLimit();
        // チェック
        if (eTime.html == 0) {
            alert("Congratulations see you tomorrow.");
        }
    }, 1000)
});

LESS : style.less

LESS を使った見た目の調整ですね. 中央に配置してフォントの大きさを調整しています.

body {
  font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
}

#main {
  position: absolute;
  height: 80px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  
  text-align :center;
  
  .time {
    font-size: 60px;
  }
}

up

Reference

参考にしたサイトです

up

以上, 『JavaScript の Date オブジェクトで一日をカウントダウンするプログラムを書いてみた』でした!! JavaScript 使いが増えると嬉しいなぁ~

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT