├── index.html
└── src
└── js
└── index.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 | HW16-class-inheritance
9 |
10 |
11 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | let correctValueTime = (value) => {
2 | return value < 10 ? '0' + value : value
3 | }
4 |
5 | class Clock {
6 | constructor(element) {
7 | this.el = element
8 | }
9 | render() {
10 | this.el.innerHTML = new Date()
11 | }
12 | }
13 |
14 | class FullTime extends Clock{
15 | render() {
16 | let date = new Date()
17 | let hours = correctValueTime(date.getHours())
18 | let minutes = correctValueTime(date.getMinutes())
19 | let seconds = correctValueTime(date.getSeconds())
20 | this.el.innerHTML = `${hours}:${minutes}:${seconds}`
21 | }
22 | }
23 |
24 | class ShortTime extends Clock {
25 | render() {
26 | let date = new Date()
27 | let hours = correctValueTime(date.getHours())
28 | let minutes = correctValueTime(date.getMinutes())
29 | this.el.innerHTML = `${hours}:${minutes}`
30 | }
31 | }
32 |
33 | let time = document.getElementById('time')
34 | let clock = new Clock(time);
35 | let shortClock = new ShortTime(time);
36 | let fullClock = new FullTime(time);
37 | setInterval(() => clock.render(), 1000);
38 | time.addEventListener('click', function (){
39 | changeFormat()
40 | })
41 | function changeFormat() {
42 | if (clock instanceof FullTime) {
43 | clock = shortClock
44 | } else {
45 | clock = fullClock
46 | }
47 | clock.render()
48 | }
49 |
--------------------------------------------------------------------------------