Monaca Docs
検索…
時計アプリ
現在の日付と時間を表示する時計アプリのサンプルです。
デモ
テスト環境
- Android 11.0
- iOS 14.3
ファイル構成
ファイル
説明
index.htmlスタート画面のページ
js/app.jsプロジェクト内のさまざまな処理を行う JavaScript ファイル
css/style.cssプロジェクトのスタイルシート ファイル
images/*.pngこのテンプレートで使用する、すべてのイメージファイル
HTML の解説
index.html
index.html ファイル内の次の記述 ( HTML の <body> 内 ) で、現在の日付と時間を表示します。1
<div id="wrapper">
2
<div id="container">
3
<img src="images/figure-0.png" class="figure" />
4
<img src="images/figure-0.png" class="figure" />
5
<img src="images/figure-colon.png" />
6
<img src="images/figure-0.png" class="figure" />
7
<img src="images/figure-0.png" class="figure" />
8
<img src="images/figure-colon.png" />
9
<img src="images/figure-0.png" class="figure" />
10
<img src="images/figure-0.png" class="figure" />
11
<div id="date"></div>
12
</div>
13
<img src="images/logo-monaca.png" style="position: absolute; left: 40px; top: 40px;" />
14
</div>
Copied!
JavaScript の解説
js/app.js
アプリが起動した後、 次の記述により、
clock() 関数が 1 秒 ( 1000 ms ) 毎に呼び出されます。1
setInterval(clock, 1000);
Copied!
clock() 関数を使用して、現在の日付と時間を表示します。最初に、現在の時間 ( 時間、分、秒 ) を取得して、時間に応じた画像 ( 数字画像 ) を表示します。次に、現在の日付 ( 日、月、年 ) を取得して、 renderDay() と renderMonth() 関数で定義した形式で表示します。clock() 関数の内容を次に示します。1
function clock() {
2
// (3) Obtain "figure" class(image of the number)
3
var figures = document.getElementsByClassName('figure');
4
// (4) Obtain the "date" ID (Date display area)
5
var date = document.getElementById('date');
6
7
// (5) Obtain the current time
8
var now = new Date();
9
10
// (6) Set the digits for the hours
11
figures[0].src = 'images/figure-' + tendigit(now.getHours()) + '.png';
12
figures[1].src = 'images/figure-' + onedigit(now.getHours()) + '.png';
13
14
// (7) Set the digits for the minutes
15
figures[2].src = 'images/figure-' + tendigit(now.getMinutes()) + '.png';
16
figures[3].src = 'images/figure-' + onedigit(now.getMinutes()) + '.png';
17
18
// (7) Set the digits for the seconds
19
figures[4].src = 'images/figure-' + tendigit(now.getSeconds()) + '.png';
20
figures[5].src = 'images/figure-' + onedigit(now.getSeconds()) + '.png';
21
22
// (8) Display the date
23
date.textContent = renderDay(now.getDay()) + ", " + renderMonth(now.getMonth()) + " " + now.getDate() + ", " + now.getFullYear();
24
}
Copied!
最終更新 5mo ago