├── index.html └── src └── js └── index.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | HW16-class-inheritance 9 | 10 | 11 |
12 | 13 |
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 | --------------------------------------------------------------------------------