如何在每次完成時停止重新計算價值？

我有用純Javascript和CSS編寫的時鐘。每當新的分鐘開始時，負責旋轉鍾針的const被重新計算爲第一個值（90deg）。它會引起問題，因爲鐘錶的手應該從頭回到第一個位置。我希望我的旋轉值不會重新啓動，並且總是以當前旋轉值繼續進行新的分鐘\小時。如何在每次完成時停止重新計算價值？

Check my demo

我做什麼？

CSS

.clock { 
width: 20rem; 
height: 20rem; 
border: 1px solid rgba(0, 0, 0, .3); 
background: #ffafbd; 
/* Old browsers */ 
background: -moz-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%); 
/* FF3.6-15 */ 
background: -webkit-linear-gradient(top, #ffafbd 0%, #ffc3a0 100%); 
/* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, #ffafbd 0%, #ffc3a0 100%); 
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffafbd', endColorstr='#ffc3a0', GradientType=0); 
/* IE6-9 */ 
border-radius: 50%; 
margin: 50px auto; 
position: relative; 
padding: 2rem; 
} 

.clock-face { 
position: relative; 
width: 100%; 
height: 100%; 
transform: translateY(-3px); 
/* account for the height of the clock hands */ 
} 

.hand { 
width: 50%; 
height: 2px; 
background: #4568dc; 
/* Old browsers */ 
background: -moz-linear-gradient(top, #4568dc 0%, #b06ab3 100%); 
/* FF3.6-15 */ 
background: -webkit-linear-gradient(top, #4568dc 0%, #b06ab3 100%); 
/* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, #4568dc 0%, #b06ab3 100%); 
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4568dc', endColorstr='#b06ab3', GradientType=0); 
/* IE6-9 */ 
position: absolute; 
top: 50%; 
transform: rotate(90deg); 
transform-origin: 100%; 
transition: transform .2s cubic-bezier(0, 2.48, 0.72, 0.66); 
} 

.hour-hand { 
top: 45%; 
left: 32.5%; 
width: 35%; 
transform-origin: 75%; 
}

的JavaScript

const secondHand = document.querySelector(".second-hand"); 
const minutesHand = document.querySelector(".min-hand"); 
const hourHand = document.querySelector(".hour-hand"); 

function getDate() { 
    const now = new Date(); 

    const seconds = now.getSeconds(); 
    const secondsRotate = ((seconds/60) * 360) + 90; 
    secondHand.style.transform = `rotate(${secondsRotate}deg)`; 


    const minutes = now.getMinutes(); 
    const minutesRotate = ((minutes/60) * 360) + 90; 
    minutesHand.style.transform = `rotate(${minutesRotate}deg)`; 

    const hours = now.getHours(); 
    const hoursRotate = ((hours/12) * 360) + 90; 
    hourHand.style.transform = `rotate(${hoursRotate}deg)`; 

    console.log(hours); 
} 

setInterval(getDate, 1000);

來源

2017-01-12 Serhii Zharkov

'常量secondsRotate =（（（秒/ 60）* 360）+ 90）％360;' – Weedoze

@同樣的結果 –

你的問題是你總是動畫你的秒鐘約3度，但是然後突然你動畫他們-360度。你必須移除-360度變化的轉換，它不會閃爍。 – Sandro

你可以簡單的禁用secondHand.style.transition時secondHandtransform旋轉度達到90：

const secondsRotate = ((seconds/60) * 360) + 90; 

    if(secondsRotate == 90) { 
    secondHand.style.transition = "none"; 
    } else { 
    secondHand.style.transition = "transform .2s cubic-bezier(0, 2.48, 0.72, 0.66)"; 
    } 

    secondHand.style.transform = `rotate(${secondsRotate}deg)`;

看到它在這裏工作：http://codepen.io/clytras/pen/bgpvxB

來源

2017-01-12 13:02:30

我也碰到過這種解決方案基於在特定的第二修改的過渡曲線：

function getDate() { 
    const now = new Date(); 

    const seconds = now.getSeconds(); 
    secondsRotate = ((seconds/60) * 360) + 90; 
    if(seconds == 0) { 
    secondHand.style.transitionDuration = "1s"; 
    secondHand.style.transitionTimingFunction = "cubic-bezier(0.545, 0.060, 0.360, 1.225)"; 
    secondsRotate = ((1/60) * 360) + 90; 
    } 
    else if(seconds == 1) { 
    secondHand.style.transitionDuration = "0.2s"; 
    secondHand.style.transitionTimingFunction = "cubic-bezier(0, 2.48, 0.72, 0.66)"; 
    } 
    secondHand.style.transform = `rotate(${secondsRotate}deg)`; 


    const minutes = now.getMinutes(); 
    const minutesRotate = ((minutes/60) * 360) + 90; 
    minutesHand.style.transform = `rotate(${minutesRotate}deg)`; 

    const hours = now.getHours(); 
    const hoursRotate = ((hours/12) * 360) + 90; 
    hourHand.style.transform = `rotate(${hoursRotate}deg)`; 

    console.log(minutesRotate); 
}

Codepen：http://codepen.io/anon/pen/bgpvoe

來源

2017-01-12 12:51:08 amc176

如何在每次完成時停止重新計算價值？

回答

相關問題