TIPLOG

WEB制作に関わるTIPS、ヒントやアイデアメモ

Home TIPLOG

【Pray For Japan】2020 東京オリンピックのカウントダウンパーツを創っておきました

2020 東京オリンピックのカウントダウンパーツを創っておきました 真央ちゃん、素晴らしかったですね。感動しました。オリンピックの間は寝不足になるのが通例になってしまいましたが、前向きな気持ちを生み出させてくれてほんと感謝です。6年後 東京で開かれるオリンピックが本当に楽しみです。思い余って、カウントダウンタイマーを創ってしまいました。いづれ改良を加え、他の方にも使っていただけるようブログパーツの形式で用意しています。簡単に構造を記録しておきます。

構成要素

 ブログパーツの創り方はいろいろあると思いますが、今回は簡単なjavascriptを用いた方法で実現しています。 貼るページ(HTMLファイル)に <script type="text/javascript" src="***.js"></script> などと組み込む方法ですね。
  • アクセスさせる gorincount.js
    var srcdir = "http://www.tsukurun.co.jp/cgi/bparts/gorincount/";
    var insjs = [
    '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\n'
    ,'<link href="http://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Gilda+Display|Acme|Poller+One|Engagement" rel="stylesheet" type="text/css">\n'
    ,'<link href="'+srcdir+'gowork.css" rel="stylesheet" type="text/css">\n'
    ,'<script src="'+srcdir+'gowork.js"></script>\n'
    ];
    for (var insitem in insjs) {
    document.write(insjs[insitem]);
    }
    □必要なソースを組み込むコントロールファイルとして
    □jQuery を利用させていただいています
    □(加えて)Google Web Font も(感謝!)
  • メインの動作ファイル gowork.js
    ※jQuery を利用したカウントダウンタイマーのソースを公開していただいている方のコード・・・ほぼそのまま利用させていただきました。この場を借りてお礼申し上げます。
    http://qiita.com/mugyuu/items/45ee16aca2972abf7c7d
    var outstr = "<img src='http://www.tsukurun.co.jp/images/bparts/gorincount/orimpic01c.gif' width='200' height='120' alt='東京オリンピック2020カウントダウン by ツクルン' title='東京オリンピック2020カウントダウン by ツクルン' />";
    outstr += "<div class='gorintimer'><div id='lasttimes'></div></div>";
    document.write(outstr);
    $(function() { countDown(); });
    function countDown() {
    var startDateTime = new Date();
    var endDateTime = new Date("July 24,2020 00:00:00");
    var left = endDateTime - startDateTime;
    var a_day = 24 * 60 * 60 * 1000;
    
    // 期限から現在までの『残時間の日の部分』
    var d = Math.floor(left / a_day) 
    
    // 期限から現在までの『残時間の時間の部分』
    var h = Math.floor((left % a_day) / (60 * 60 * 1000)) 
    
    // 残時間を秒で割って残分数を出す。
    // 残分数を60で割ることで、残時間の「時」の余りとして、『残時間の分の部分』を出す
    var m = Math.floor((left % a_day) / (60 * 1000)) % 60 
    
    // 残時間をミリ秒で割って、残秒数を出す。
    // 残秒数を60で割った余りとして、「秒」の余りとしての残「ミリ秒」を出す。
    // 更にそれを60で割った余りとして、「分」で割った余りとしての『残時間の秒の部分』を出す
    var s = Math.floor((left % a_day) / 1000) % 60 % 60 
    
    var outstr = d + '日 ';
    if(d < 31){
    outstr += h + '時間 ';
    if(d <= 7){
    outstr += m + '分 ';
    if(d <= 1){
    outstr += s + '秒 ';
    }
    }
    }
    $("#lasttimes").text(outstr);
    setTimeout('countDown()', 1 * 1000);
    }
    
    □当面の間は 「日」表示だけに
    □gifアニメーションを加えました
  • デザイン周りは gowork.css
    #lasttimes {
    font-family: 'Poller One', cursive; font-weight: 400;
    width:200px;
    }
    #lasttimes {
    text-align: center;
    position: relative;
    top: -25px;
    font-size: 1.5em;
    }
    □Google Web Font は楽しいです

御利用

 まだまだ改良してゆきますが、このままでもよろしければ、どうぞお使いください。
 次のコードを貼るだけで動作します。
<script type="text/javascript" src="http://new.tsukurun.co.jp/cgi/bparts/gorincount.js"></script>

今後の改良

 いろいろアイデアがあるので、また更新します。楽しみな6年間・・・

 

 

コメントをどうぞ

UP