ゼミの轍: 「今年は平成何年？」アプリ

Monacaを使ったスマホアプリの開発を勉強しています。前回、前々回とテキスト（公式ガイドブック）の第3章にある「今年は平成何年？」というアプリを作っています。そして、前回、次のような課題を出しました。

西暦（A.D.2016）の下に月日と時分秒を表示させる
できれば、時分秒は刻々と変化させる

つまり次のような画面になるように改良する課題です。

ソースコードは次のようになります。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var WEEK = ['日','月','火','水','木','金','土'];
        var timer_id;
        // ページの読み込みが終わったら実行する
        //document.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function(){
            // 今の日付を得る
            var nowDate = new Date();
            // 西暦を得る
            var fullYear = nowDate.getFullYear();
            // 数値の西暦を文字列に変換して、そこから下2桁の文字列を得る
            var shortYear = String(fullYear).substr(2, 2);
            // 西暦の下2桁の文字列を数値に変換して、それに12を足す
            var heiseiYear = Number(shortYear) + 12;
            // 得られた数値をHTML に反映
            //document.getElementById('heisei-year').textContent = heiseiYear;
            $('#heisei-year').text(heiseiYear);
            //document.getElementById('year').textContent = fullYear;
            $('#year').text(fullYear);
            
            var month = nowDate.getMonth() + 1;
            var date = nowDate.getDate();
            var day = nowDate.getDay();
            $('#month').text(month);
            $('#date').text(date);
            $('#week').text(WEEK[day]);
            
            timer_id = setInterval( function () {
                showTime();
         } , 1000 );

        });
        
        function showTime() {
            var nowDate = new Date();
            var hours = nowDate.getHours();
            var minutes = nowDate.getMinutes();
            var seconds = nowDate.getSeconds();
            $('#hours').text(hours);
            $('#minutes').text(('0' + minutes).slice(-2));
            $('#seconds').text(('0' + seconds).slice(-2));
        }

        $(document).on('click', '#btn', function(eo){
            //alert(this.value);
            //alert($(this).val());
            if($(this).val() == 'STOP') {
                clearInterval(timer_id);
                $(this).val('START');
            } else {
                timer_id = setInterval( function () {
                    showTime();
                } , 1000 );
                $(this).val('STOP');
            };
        });
        
    </script>
</head>
<body>
 <div id="heisei">
  今年は平成<span id="heisei-year"></span>年です
 </div>
 <div id="ad">A.D. <span id="year"></span></div>
 <div id="md"><span id="month"></span>月<span id="date"></span>日(<span id="week"></span>)</div>
 <div id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></div>
 <input id="btn" type="button" value="STOP">    
</body>
</html>

ゼミの轍

2016年4月20日水曜日

「今年は平成何年？」アプリ

0 件のコメント:

コメントを投稿