Monaca Docs
Search…
Clock App
This sample app is a clock app displaying current Date and time.
Demo
Tested Environment
- Android 11.0
- iOS 14.3
File Components
File
Description
index.htmlThe Startup page
js/app.jsThe JavaScript file handling implementation in the project
css/style.cssThe style Sheet for the project
images/*.pngAll image files needed to use this template
HTML Explanation
index.html
The following HTML body of
index.html file is for displaying the current Date and time.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 Explanation
js/app.js
When the application is loaded, the
clock() function is called every 1 seconds (1000 ms) by this statement:1
setInterval(clock, 1000);
Copied!
The
clock() function is used to display the current date and time. First, it gets the current time (hour, minute and second) and then display the images (digit image) according to the time. Next, it gets the current date (day, month and year) and then display it in the format as defined in renderDay() and renderMonth() functions. Here is content of the clock() function: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!
Last modified 4mo ago