Demo
在網頁畫面產生一個時鐘，能及時呈現目前的時間。
並且類似時鐘會有3個指針，每個指針會隨著時間的變化，有著相對應的變化，做出跟真實的時鐘一樣，指針會隨著時間移動。
首先先設定div作為時鐘的背景，裡面有三個div元素的指針。
接下來使用new Date()建立一個時間物件，透過時間物件取得目前的秒.getSeconds()，分.getMinutes()，時.getHours()。
當元件要有旋轉的動作是使用csstransform: rotate()來讓元件旋轉，rotate()是依照輸入角度有變化的動作。
但時間要如何轉換成成角度？ 透過 （目前時間/時間長度）＊360度 就被轉換成目前時間的角度。
讓指針元件加入css樣式transform: rotate(角度)
接下來如何讓元件會隨著秒數移動？ 透過setInterval（ 目標執行函數, 執行毫秒）來讓目標函數過多久的方式來執行。
setInterval(setDate, 1000);
執行網頁時，指針元件就有旋轉的動作。
但是可能會有下列問題
指針元件旋轉是以本身的元件的中心點旋轉，不是以端點做完旋轉點。
要解決這個問題是要透過transform-origin來改變的變化的中心點。
指針的角度不對，指針的元件設定出來為平行，但計算出來的角度是以0度角為出發點，指針的出發點為270度
要解決這個問題是要在秒數計算出角度時，加入90度讓它呈現，以0度角為主。
const secondsDegrees = ((seconds / 60) * 360) + 90;
這樣做可以做出一個有時鐘效果的網站。
但這時發生了一個問題，就是當秒針為0時秒針會有迴轉的動畫產生。
檢查發現是css的中transition的transition-timing-function造成的結果。
為了迴轉的動畫發生，在旋轉的角度採給累加角度作為旋轉的角度。
let seconds = now.getSeconds()*6+90;
seconds += 360/60;
second.style.transform=`rotate(${seconds}deg ) scaleX(1)`;
這樣才避免迴轉的動畫發生
transition-timing-function 是transition的屬性之一，他主要控制元件在變化時的速率，本篇是透過貝茲曲線來控制指針變化時，有跳動的效果。
transition-timing-function是指變化時間中變化的速率，
因此可以看出在時間進行時，斜率的大小改變變化的速率。[1]
Html:
<div class=”clock”>
<div class=”clock-face”>
<div class=”hand hour-hand”></div>
<div class=”hand min-hand”></div>
<div class=”hand second-hand”></div>
</div>
</div>
建立時鐘的元件，包含秒針，分針，時針。
Javascript:
Date
建立一個 JavaScript Date 物件來指向某一個時間點。
const now = new Date();
setInterval()
setInterval()可以依照設定時間重複執行。
var intervalID = window.setInterval(myCallback, 500);
function myCallback() {
// Your code here
}
Css:
transition
# /* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
transition-property
定義哪些 CSS properties 會被轉場效果影響。[1]
transition-property: all, -moz-specific, sliding;
transition-duration
定義轉場所花費的時間。[2]
transition-duration: 10s, 30s, 230ms;
transition-timing-function
設定轉場時所依據的貝茲曲線。[3]
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-delay
定義多久之後開始發生轉場。[4]
transition-delay: 2s, 4ms;
範例
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
範例:當delay元素在滑鼠指到時，就發生字的大小從14px到36px，變化的時間為4秒，2秒後才發生變化的動作。
transform
變形矩陣:transform: matrix()
<matrix()> = matrix( [, ]{5,5} )
<matrix3d()> = matrix3d( [, ]{15,15} )
位移:translate()
transform: translate(X, Y)
transform: translate(120px, 50%);
<translate()> = translate( <length-percentage> [, <length-percentage> ]? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
縮放:transform: scale()
transform: scale(30deg, 20deg);
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
傾斜:transform: scale()
transform: skew(30deg, 20deg);
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
旋轉:transform: scale()
transform: rotate(0.5turn);
旋轉
<rotate()> = rotate( <angle> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
transform-origin
transform-origin為element在變形的中心點，而預設的中心在正中間，可以透過transform-origin來調整element的中心點。
tags: transition, transform, setInterval, Date
转载请注明：XAMPP中文组官网 » Day2 JS + CSS Clock