JS30挑戰-Day2-CSS+JS

本篇文章主要紀錄觀看Alex大大直播紀錄後，所做的筆記記錄
Demo連結

Alex老師直播
談談 JavaScript 的 setTimeout 與 setInterval

• 挑戰刻另外一個時鐘 文章

---

JS撰寫有以下重點
1.綁定Dom：時針、分支、秒針
2.取得時間new Date（）
3.旋轉rotate角度計算
4.更新計時器：setInterval、setTimeout、requestAnimationFrame()

JS

立即函示已經封裝完會加分號;如下
原因就是有不同程式引入時候，避免與不同script連在一起出錯

;(function(){
  .....內容    
})()

• 時間計算
  共有下面四種寫法：

1. new Date();
2. new Date(value);
3. new Date(dateString);
4. new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);

   補充：
   前端工程研究：關於 JavaScript 中 Date 型別的常見地雷與建議作法
   JavaScript Date 時間和日期 操作

• 功能一：初始化畫面
  提醒：在window中，立即函示中呼叫不到setClock
  解決方案：先呼叫一次，初始化畫面

• 功能二：更新畫面（需要用到計時器）影片41分介紹

  小提示：加上較細微變化 如:時針在過度時候，會漸漸傾斜

• setInterval、setTimeout、requestAnimationFrame()比較三者差異（影片：50分開始）

1. setInterval (設定間隔，持續執行) 常用在：輪播效果
   setInterval則是固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。 當然也會回傳一個獨立的 timer ID

   let intervalID = window.setInterval(func, delay[, param1, param2, ...]);
   let intervalID = window.setInterval(code, delay);

2. setTimeout(設定延遲，只會執行ㄧ次)
   說明：根據MDN解釋：定時器在特定時間後(單位為毫秒) 之後，執行一段程式碼或字串，並且會回傳一個獨立的 timer ID
   寫法：

   範例：
   var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);
   var timeoutID = scope.setTimeout(function[, delay]); 
   var timeoutID = scope.setTimeout(code[, delay]);
   
   實際案例：
   window.setTimeout(alertEvent,1000);
   function alertEvent(){
      ......執行內容
   }

   補充：
   延遲設定時間跟我們螢幕赫茲（硬體）有關（最普通：60HZ），這範例時間設太短（如：５毫秒）螢幕畫面並不會呈現

3. requestAnimationFrame（處理畫面更新的setTimeout）
   語法如下

   requestID = window.requestAnimationFrame(callback);      
    // Firefox 23 / IE 10 / Chrome
   requestID = window.mozRequestAnimationFrame(callback);    
   // Firefox < 23
   requestID = window.webkitRequestAnimationFrame(callback); 
   // Safari

CSS

• Border-radius語法：
  Border-radius 50% vs 100%
  上面寫的結果都是圓形喔，原因是如果相臨角的半徑超過盒子的長度，瀏覽器會重新計算。示意圖如下：
  

• 中間小圓點製作
  transform使用：
  可以用在2D、3D效果上 例如：

  transform:rotate(30deg) 旋轉30度
  transform: translate(120px, 50%); 平移120px 往下移動50%
  transform: skew(30deg, 20deg); 傾斜
  transform: scale(2, 0.5); 放大

  補充：MDN介紹–transform transorm解釋
  延伸閱讀：
  [[[筆記]Css-transition、animation(animate)動畫效果]]

• 時針、秒針、分針製作（影片：21分開始）

• 偽元素使用 [[[筆記]偽元素（Pseudo Element）、偽類 (pseudo class) 介紹]]

心得

• 取得時間後，不知道如何讓畫面動起來（後來再看一次影片得知 transform:rotate用法動態加上角度轉換
• es6語法撰寫不熟。畫面ㄧ直出不來