├── index.html └── src └── js └── index.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | HW15-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 | 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 | --------------------------------------------------------------------------------