var msm = 0; function cMenu(menu){ switch(menu){ case "clock" : $(".clockBtn").css("color", "#3fa0b0"); $(".alarmBtn").css("color", "#666"); $(".stopWBtn").css("color", "#666"); $(".timerBtn").css("color", "#666"); $(".cActive").css("left", "0"); $(".cTab").css("left", "0"); $(".aTab").css("left", "100%"); $(".sTab").css("left", "200%"); $(".tTab").css("left", "300%"); $(".prog").css("left", "150%"); $(".clock").css("left", "50%"); $(".stopC").css("left", "150%"); break; case "alarm" : $(".clockBtn").css("color", "#666"); $(".alarmBtn").css("color", "#3fa0b0"); $(".stopWBtn").css("color", "#666"); $(".timerBtn").css("color", "#666"); $(".cActive").css("left", "65px"); $(".cTab").css("left", "-100%"); $(".aTab").css("left", "0"); $(".sTab").css("left", "100%"); $(".tTab").css("left", "200%"); $(".prog").css("left", "150%"); $(".clock").css("left", "50%"); $(".stopC").css("left", "150%"); break; case "stopW" : $(".clockBtn").css("color", "#666"); $(".alarmBtn").css("color", "#666"); $(".stopWBtn").css("color", "#3fa0b0"); $(".timerBtn").css("color", "#666"); $(".cActive").css("left", "130px"); $(".cTab").css("left", "-200%"); $(".aTab").css("left", "-100%"); $(".sTab").css("left", "0"); $(".tTab").css("left", "100%"); $(".prog").css("left", "150%"); $(".clock").css("left", "-150%"); $(".stopC").css("left", "50%"); break; case "timer" : $(".clockBtn").css("color", "#666"); $(".alarmBtn").css("color", "#666"); $(".stopWBtn").css("color", "#666"); $(".timerBtn").css("color", "#3fa0b0"); $(".cActive").css("left", "195px"); $(".cTab").css("left", "-300%"); $(".aTab").css("left", "-200%"); $(".sTab").css("left", "-100%"); $(".tTab").css("left", "0"); $(".prog").css("left", "50%"); $(".clock").css("left", "-150%"); $(".stopC").css("left", "-150%"); break; } } function mouseHover(e){ var x = e.clientX; var y = e.clientY; var a = x/3-95; var b = y/3-47; $(".clock").css("transform", `translate(-50%,-50%) rotateY(${a}deg) rotateX(${-b}deg)`); $(".clock").css("transition", "0.1s"); $(".prog").css("transform", `translate(-50%,-50%) rotateY(${a}deg) rotateX(${-b}deg)`); $(".prog").css("transition", "0.1s"); $(".stopC").css("transform", `translate(-50%,-50%) rotateY(${a}deg) rotateX(${-b}deg)`); $(".stopC").css("transition", "0.1s"); } function mouseHoverEnd(){ $(".clock").css("transform", "translate(-50%,-50%) rotateY(0deg) rotateX(0deg)"); $(".clock").css("transition", "0.5s"); $(".prog").css("transform", "translate(-50%,-50%) rotateY(0deg) rotateX(0deg)"); $(".prog").css("transition", "0.5s"); $(".stopC").css("transform", "translate(-50%,-50%) rotateY(0deg) rotateX(0deg)"); $(".stopC").css("transition", "0.5s"); } var cX, cY; function touchHover(e){ cX = e.touches[0].clientX; cY = e.touches[0].clientY; a = cX/3-75; b = cY/3-46; $(".clock").css("transform", `translate(-50%,-50%) rotateY(${a}deg) rotateX(${-b}deg)`); $(".clock").css("transition", "0.1s"); $(".prog").css("transform", `translate(-50%,-50%) rotateY(${a}deg) rotateX(${-b}deg)`); $(".prog").css("transition", "0.1s"); $(".stopC").css("transform", `translate(-50%,-50%) rotateY(${a}deg) rotateX(${-b}deg)`); $(".stopC").css("transition", "0.1s"); } function touchHoverEnd(){ $(".clock").css("transform", "translate(-50%,-50%) rotateY(0deg) rotateX(0deg)"); $(".clock").css("transition", "0.5s"); $(".prog").css("transform", "translate(-50%,-50%) rotateY(0deg) rotateX(0deg)"); $(".prog").css("transition", "0.5s"); $(".stopC").css("transform", "translate(-50%,-50%) rotateY(0deg) rotateX(0deg)"); $(".stopC").css("transition", "0.5s"); } function sStartF(){ stopWatchStart = setInterval(countDownS,10); $(".sStart").css("display", "none"); $(".sStop").css("display", "block"); $(".sLap").css("display", "block"); } function sStopF(){ $(".sStop").css("display", "none"); $(".sLap").css("display", "none"); $(".sResume").css("display", "block"); $(".sRestart").css("display", "block"); clearInterval(stopWatchStart); } var lap = 0; function sLapF(){ lap++; $(".sTim").css("top", "30px"); laps = document.querySelector(".laps"); var p = document.createElement("p") ; p.classList.add("lap") var timer = lap + ". " + $(".sTim").text(); var ptext = document.createTextNode(timer); p.appendChild(ptext); laps.style.top = "50px"; laps.appendChild(p); } function sResumeF(){ $(".sStop").css("display", "block"); $(".sLap").css("display", "block"); $(".sResume").css("display", "none"); $(".sRestart").css("display", "none"); stopWatchStart = setInterval(countDownS,10); } function sRestartF(){ $(".sTim").css("top", "50%"); $(".laps").css("top", "100%"); $(".sStart").css("display", "block"); $(".sStop").css("display", "none"); $(".sLap").css("display", "none"); $(".sResume").css("display", "none"); $(".sRestart").css("display", "none"); msm = 0; lap = 0; $(".sTim").html("00" + ":" + "00" + "." + "00"); $(".laps").html(""); } function countDownS(){ msm++; var min = Math.floor((msm / (100 * 60 * 60))); var sec = Math.floor((msm % (100 * 60)) / 100); var mls = Math.floor(msm % 100); min = (min < 10) ? "0" + min : min; sec = (sec < 10) ? "0" + sec : sec; mls = (mls < 10) ? "0" + mls : mls; $(".sTim").html(min + ":" + sec + "." + mls); } var a = 98; var b = 58; var c = 58; window.onload = function(){ for( var i = 0; i <104; i++){ var li = document.createElement("li"); var hourList = document.querySelector(".hourList"); li.classList.add("li"); li.innerHTML= a++; if(a > 99){ a = 0; } hourList.appendChild(li); } for( var i = 0; i <64; i++){ var li = document.createElement("li"); var minuList = document.querySelector(".minuList"); li.classList.add("li"); li.innerHTML= b++; if(b > 59){ b = 0; } minuList.appendChild(li); } for( var i = 0; i <64; i++){ var li = document.createElement("li"); var secoList = document.querySelector(".secoList"); li.classList.add("li"); li.innerHTML= c++; if(c > 59){ c = 0; } secoList.appendChild(li); } } function hi(scr){ ul0 = document.querySelector(".hourList"); ul1 = document.querySelector(".minuList"); ul2 = document.querySelector(".secoList"); start = document.querySelector(".start"); i = Math.floor(ul0.scrollTop /29.7142); j = Math.floor(ul1.scrollTop /29.7142); k = Math.floor(ul2.scrollTop / 29.7142); i = (i < 10) ? "0" + i : i; j = (j < 10) ? "0" + j : j; k = (k < 10) ? "0" + k : k; if(i < 1 && j < 1 && k < 1){ start.disabled = true; start.style.color = "rgba(63,160,176,0.5)"; }else{ start.style.color = "rgba(63,160,176,1)"; start.disabled = false; } switch(scr){ case"i": $(".i").html(i); break; case"j": $(".j").html(j); break; case"k": $(".k").html(k); break; } } var l; var timeInt = false; function startF(){ aniModal = document.querySelector(".aniModal"); divI = document.querySelector(".i"); divJ = document.querySelector(".j"); divK = document.querySelector(".k"); c1 = document.querySelector(".c1"); c2 = document.querySelector(".c2"); c3 = document.querySelector(".c3"); c4 = document.querySelector(".c4"); cX = document.querySelector(".cXx") prog = document.querySelector(".prog"); pause = document.querySelector(".pause"); cancel = document.querySelector(".cancel"); l = ((i * 60 * 60) + (j * 60) + k); c1.classList.add("c1X"); c1.style.animationDuration = `${l}s`; c2.classList.add("c2X"); c2.style.animationDuration = `${l}s`; c3.classList.add("c3X"); c3.style.animationDuration = `${l}s`; c4.classList.add("c4X"); c4.style.animationDuration = `${l}s`; pause.style.display = "block"; cancel.style.display = "block"; document.querySelector(".start").style.display = "none"; timeInt = setInterval(countDown,1000); if(l < 11){ prog.style.borderColor = "#f94437"; cX.style.borderColor = "#f94437"; divI.style.color = "#f94437"; divJ.style.color = "#f94437"; divK.style.color = "#f94437"; document.querySelector(".jj").style.color = "#f94437"; document.querySelector(".kk").style.color = "#f94437"; } } function countDown(){ l--; seconds = Math.floor(l % 60); minutes = Math.floor((l % (60 * 60)) / 60); hours = Math.floor(l / (60 * 60)); hours = (hours < 10) ? "0" + hours : hours; minutes = (minutes < 10) ? "0" + minutes : minutes; seconds = (seconds < 10) ? "0" + seconds : seconds; divI.innerHTML = hours; divJ.innerHTML = minutes; divK.innerHTML = seconds; if(l === 0){ c1.classList.remove("c1X"); c2.classList.remove("c2X"); c3.classList.remove("c3X"); c4.classList.remove("c4X"); pause.style.display = "none"; cancel.style.display = "none"; document.querySelector(".start").style.display = "block"; clearInterval(timeInt); } if(l < 11){ prog.style.borderColor = "#f94437"; cX.style.borderColor = "#f94437"; divI.style.color = "#f94437"; divJ.style.color = "#f94437"; divK.style.color = "#f94437"; document.querySelector(".jj").style.color = "#f94437"; document.querySelector(".kk").style.color = "#f94437"; } } function pauseF(){ if(timeInt){ c1.style.animationPlayState = "paused"; c2.style.animationPlayState = "paused"; c3.style.animationPlayState = "paused"; c4.style.animationPlayState = "paused"; pause.innerHTML = "RESUME"; pause.style.color = "green"; clearInterval(timeInt); timeInt = false }else{ c1.style.animationPlayState = "running"; c2.style.animationPlayState = "running"; c3.style.animationPlayState = "running"; c4.style.animationPlayState = "running"; pause.innerHTML = "PAUSE"; pause.style.color = "#3fa0b0"; timeInt = setInterval(countDown,1000); } } function cancelF(){ c1.classList.remove("c1X"); c2.classList.remove("c2X"); c3.classList.remove("c3X"); c4.classList.remove("c4X"); c1.style.animationDuration = ""; c2.style.animationDuration = ""; c3.style.animationDuration = ""; c4.style.animationDuration = ""; pause.style.display = "none"; cancel.style.display = "none"; prog.style.borderColor = "#f94437"; cX.style.borderColor = "#f94437"; document.querySelector(".i").style.color = "#00ff00"; document.querySelector(".j").style.color = "#00ff00"; document.querySelector(".k").style.color = "#00ff00"; document.querySelector(".jj").style.color = "#00ff00"; document.querySelector(".kk").style.color = "#00ff00"; document.querySelector(".start").style.display = "block"; divI.innerHTML = "00"; divJ.innerHTML = "00"; divK.innerHTML = "00"; clearInterval(timeInt); }

Clock Preserve-3D