【JS30-2】CSS + JS Clock

更新於 發佈於 閱讀時間約 2 分鐘
JS + CSS Clock

JS + CSS Clock


JavaScript30 傳送門:https://javascript30.com/
今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛


第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長這樣:

start 檔

start 檔


到頭來只需要思考如何讓指針隨著 now 動起來!



CSS transform、transition


因為要讓指針以圓心為支點旋轉,所以開始找 rotate 的方法,才對於 CSS 的 transformtransition 有更深的了解。

平常很少在 CSS 寫到這兩個屬性(或是寫到的時候都在放空),發現自己根本沒有搞懂過這兩個差別~現在要來還債惹:

  • TransformThe transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. (CSS 變換屬性可讓您旋轉、縮放、傾斜或平移元素。它修改 CSS 視覺格式化模型的座標空間。)
  • TransitionThe transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, and transition-behavior. (CSS 過渡屬性是 transition-property、transition-duration、transition-timing-function、transition-delay和transition-behavior 的簡寫屬性。)(有講跟沒講一樣)

總之學了一年的前端,現在才知道一個是改變外觀或位置、一個是設定過渡效果😀

寫到這裡好懶,就這樣吧。

留言
avatar-img
留言分享你的想法!
avatar-img
hunwooooof
1會員
6內容數
肚子餓了
hunwooooof的其他內容
2024/05/30
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
2024/05/30
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
2024/05/29
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
2024/05/29
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
2024/05/28
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
2024/05/28
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
Thumbnail
想要找個地方記錄自己寫 JavaScript 30 挑戰時額外的小筆記✍🏻 JavaScript30 傳送門:https://javascript30.com/ 第一個挑戰是寫一個 keydown 事件並讓頁面隨著不同的按鍵發出不同的聲音。
Thumbnail
想要找個地方記錄自己寫 JavaScript 30 挑戰時額外的小筆記✍🏻 JavaScript30 傳送門:https://javascript30.com/ 第一個挑戰是寫一個 keydown 事件並讓頁面隨著不同的按鍵發出不同的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News