# 時計アプリ
現在の日付と時間を表示する時計アプリのサンプルです。
## デモ
[**プロジェクトをインポート**](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();
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ja.docs.monaca.io/sampleapp/samples/clock.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
