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