function Clock (ID) { // cache 'this' var _this = this; // ID-selector for clock _this.id = ID; _this.element = document.getElementById(_this.id); _this.day = _this.element.querySelectorAll('.day')[0]; _this.seconds = _this.element.querySelectorAll('.seconds')[0]; _this.minutes = _this.element.querySelectorAll('.minutes')[0]; _this.hours = _this.element.querySelectorAll('.hours')[0]; // get the currentDate _this.now = function(){ return new Date(); }; // get date-parts _this.currentSecond = function() { return _this.now().getSeconds() } _this.currentMinute = function() { return _this.now().getMinutes() } _this.currentHour = function() { return this.now().getHours() } _this.currentDay = function() { return _this.now().getDate() } _this.currentMonth = function() { return _this.now().getMonth()+1 } _this.currentYear = function() { return _this.now().getFullYear() } // run the clock _this.run = function() { try { // try to apply actions var normalize = -90; var hrs = 12; var mins = 60; var secs = 60; var hDeg = 360 / hrs; var mDeg = 360 / mins; var sDeg = 360 / secs; // provide a function to rerun var tick = function(){ _this.seconds.style.transform = '' + 'rotate(' + (normalize + sDeg * _this.currentSecond()) + 'deg)'; _this.minutes.style.transform = '' + 'rotate(' + (normalize + mDeg * _this.currentMinute()) + 'deg)'; _this.hours.style.transform = '' + 'rotate(' + (normalize + hDeg * _this.currentHour() + hDeg / mins * _this.currentMinute()) + 'deg)'; _this.day.innerText = _this.currentDay(); // rerun requestAnimationFrame(tick); }; // start ticking requestAnimationFrame(tick); } catch(err) { // otherwise display an error console.error(err.message); return; } }; // run on init _this.run(); } // create a new clock var clock = new Clock('clock-1');