# 時計アプリ
現在の日付と時間を表示する時計アプリのサンプルです。
## デモ
[**プロジェクトをインポート**](https://monaca.mobi/ja/directimport?pid=64081374e78885240668f94f)
**テスト環境**
* Android 11.0
* iOS 14.3
## ファイル構成
| ファイル | 説明 |
| --------------- | ---------------------------------- |
| `index.html` | スタート画面のページ |
| `js/app.js` | プロジェクト内のさまざまな処理を行う JavaScript ファイル |
| `css/style.css` | プロジェクトのスタイルシート ファイル |
| `images/*.png` | このテンプレートで使用する、すべてのイメージファイル |
## HTML の解説
### index.html
`index.html` ファイル内の次の記述 ( HTML の \ 内 ) で、現在の日付と時間を表示します。
```markup
```
## JavaScript の解説
### js/app.js
アプリが起動した後、 次の記述により、 `clock()` 関数が 1 秒 ( `1000 ms` ) 毎に呼び出されます。
```javascript
setInterval(clock, 1000);
```
`clock()` 関数を使用して、現在の日付と時間を表示します。最初に、現在の時間 ( 時間、分、秒 ) を取得して、時間に応じた画像 ( 数字画像 ) を表示します。次に、現在の日付 ( 日、月、年 ) を取得して、 `renderDay()` と `renderMonth()` 関数で定義した形式で表示します。`clock()` 関数の内容を次に示します。
```javascript
function clock() {
// (3) Obtain "figure" class(image of the number)
var figures = document.getElementsByClassName('figure');
// (4) Obtain the "date" ID (Date display area)
var date = document.getElementById('date');
// (5) Obtain the current time
var now = new Date();
// (6) Set the digits for the hours
figures[0].src = 'images/figure-' + tendigit(now.getHours()) + '.png';
figures[1].src = 'images/figure-' + onedigit(now.getHours()) + '.png';
// (7) Set the digits for the minutes
figures[2].src = 'images/figure-' + tendigit(now.getMinutes()) + '.png';
figures[3].src = 'images/figure-' + onedigit(now.getMinutes()) + '.png';
// (7) Set the digits for the seconds
figures[4].src = 'images/figure-' + tendigit(now.getSeconds()) + '.png';
figures[5].src = 'images/figure-' + onedigit(now.getSeconds()) + '.png';
// (8) Display the date
date.textContent = renderDay(now.getDay()) + ", " + renderMonth(now.getMonth()) + " " + now.getDate() + ", " + now.getFullYear();
}
```
