$(function() { let now = new Date($.now()); /* BEGIN HOUR */ let hourCurrent = now.getHours(); let hours = $('#hours'); for(let i=0; i<24;i++) { let h = document.createElement('li'); h.classList.add('slide'); h.innerHTML = i<10 ? '0' + i : i; hours.append('

'+(i<10?'0'+i:i)+'

') } hours.css({top: -80 * (hourCurrent + 1) }); let hourItems = hours.find('li'); let hourLen = hourItems.length; let hourFirst = hourItems.filter(':first-child'); let hourSecond = hourItems.filter((index)=>index==1); let hourLast = hourItems.filter(':last-child'); let hourSecondlast = hourItems.filter((index)=>index==hourItems.length-2); let hourTriggers = $('.button-hour'); hourFirst.before(hourSecondlast.clone(true)); hourFirst.before(hourLast.clone(true)); hourLast.after(hourSecond.clone(true)); hourLast.after(hourFirst.clone(true)); hourTriggers.on('click', function() { if (hours.is(':not(:animated)')) { let cycle = false; let delta = (this.id === "prev-hour")? -1 : 1; hours.animate({ top: "+=" + (-80 * delta) }, function() { hourCurrent += delta; cycle = !!(hourCurrent === 0 || hourCurrent > hourLen); if (cycle) { hourCurrent = (hourCurrent === 0)? hourLen : 1; hours.css({top: -80 * (hourCurrent + 1) }); } }); } }); /*END HOUR*/ /* BEGIN MINUTE */ let minuteCurrent = now.getMinutes(); let minutes = $('#minutes'); for(let i=0; i<60;i++) { let h = document.createElement('li'); h.classList.add('slide'); h.innerHTML = i<10 ? '0' + i : i; minutes.append('

'+(i<10?'0'+i:i)+'

') } minutes.css({top: -80 * (minuteCurrent + 1) }); let minuteItems = minutes.find('li'); let minuteLen = minuteItems.length; let minuteFirst = minuteItems.filter(':first-child'); let minuteSecond = minuteItems.filter((index)=>index==1); let minuteLast = minuteItems.filter(':last-child'); let minuteSecondlast = minuteItems.filter((index)=>index==minuteItems.length-2); let minuteTriggers = $('.button-minute'); minuteFirst.before(minuteSecondlast.clone(true)); minuteFirst.before(minuteLast.clone(true)); minuteLast.after(minuteSecond.clone(true)); minuteLast.after(minuteFirst.clone(true)); minuteTriggers.on('click', function() { if (minutes.is(':not(:animated)')) { let cycle = false; let delta = (this.id === "prev-minute")? -1 : 1; minutes.animate({ top: "+=" + (-80 * delta) }, function() { minuteCurrent += delta; cycle = !!(minuteCurrent === 0 || minuteCurrent > minuteLen); if (cycle) { minuteCurrent = (minuteCurrent === 0)? minuteLen : 1; minutes.css({top: -80 * (minuteCurrent + 1) }); } }); } }); /*END MINUTE*/ /* BEGIN SECONDS */ let secondsCurrent = now.getSeconds(); let seconds = $('#seconds'); for(let i=0; i<60;i++) { let h = document.createElement('li'); h.classList.add('slide'); h.innerHTML = i<10 ? '0' + i : i; seconds.append('

'+(i<10?'0'+i:i)+'

') } seconds.css({top: -80 * (secondsCurrent + 1) }); let secundeItems = seconds.find('li'); let secundeLen = secundeItems.length; let secundeFirst = secundeItems.filter(':first-child'); let secundeSecond = secundeItems.filter((index)=>index==1); let secundeLast = secundeItems.filter(':last-child'); let secundeSecondlast = secundeItems.filter((index)=>index==secundeItems.length-2); let secundeTriggers = $('.button-second'); secundeFirst.before(secundeSecondlast.clone(true)); secundeFirst.before(secundeLast.clone(true)); secundeLast.after(secundeSecond.clone(true)); secundeLast.after(secundeFirst.clone(true)); secundeTriggers.on('click', function() { if (seconds.is(':not(:animated)')) { let cycle = false; let delta = (this.id === "prev-second")? -1 : 1; seconds.animate({ top: "+=" + (-80 * delta) }, function() { secondsCurrent += delta; cycle = !!(secondsCurrent === 0 || secondsCurrent > secundeLen); if (cycle) { secondsCurrent = (secondsCurrent === 0)? secundeLen : 1; seconds.css({top: -80 * (secondsCurrent + 1) }); } }); } }); /*END MINUTE*/ });

TimePicker