**感謝https://javascript30.com/的免費教程

Demo：http://codepen.io/FutureFronterAndy/pen/KNBEJa

今天主要的練習為js中時間的抓取和如何調整對應的css

學習點：

[css]

.hand {
 width:50%;
 height:6px;
 background:black;
 position: absolute;
 top: 50%;
 right: 50%;
 transform-origin: 100%; 
 /* 原地旋轉 */
 transform: rotate(90deg);
 transition: all 0.05s;
 transition-timing-function: cubic-bezier(0, 1.47, 1, 1);
 }

[/css]

transform-origin:以右方為支點做動畫(指針的旋轉要以時鐘正中心為支點旋轉)

transform: rotate(90deg)初始的旋轉角度

transition:動畫速度(影格)http://www.w3schools.com/css/css3_transitions.asp

transition-timing-function: cubic-bezier(0, 1.47, 1, 1);動畫影格，可自行在console中調整

[javascript]
const secondHand=document.querySelector(".second-hand");
 
 const minHand=document.querySelector('.min-hand');
 const hourHand=document.querySelector('.hour-hand');
 function setDate(){
 const now=new Date();
 const second=now.getSeconds();
 const secondDeg=(second/60)*360+90;
 secondHand.style.transform=`rotate(${secondDeg}deg)`;
 
 const min=now.getMinutes();
 const minuteDeg=(min/60)*360+90;
 minHand.style.transform=`rotate(${minuteDeg}deg)`;
 
 const hour=now.getHour();
 const hourDeg=(hour/12)*360+90;
 hourHand.style.transform=`rotate(${hourDeg}deg)`;
 console.log(now);
 }
 setInterval(setDate,1000);
 setDate();
[/javascript]

querySelector：Day1練習過，抓取選擇器
Date()：中原標準時間
secondHand.style.transform=rotate(${secondDeg}deg)
改變CSS中secondHand類別的transform裡的角度

**