【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
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
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