自學網頁前端

更新 發佈閱讀 2 分鐘

教到了JS event,非常實用的一堂課程,開始進入監聽階段,可以跟使用者互動,也慢慢建立UX的概念,讓我可以開始自行設計動態網頁,並且優化了第二個靜態網頁,加入了滾動變化的效果。

let header = document.querySelector("header");
let headerAnchor = document.querySelectorAll("header nav ul li a")
window.addEventListener("scroll",() => {
if (window.pageYOffset != 0){
header.style.backgroundColor ="rgba(72,60,139,0.3";
header.style.color = "white";
headerAnchor.forEach(a => {
a.style.color = "white";
})
} else{
header.style.backgroundColor = "";
header.style.color = "";
headerAnchor.forEach(a => {
a.style.color = "#381b11";
})
}
})
留言
avatar-img
留言分享你的想法!
avatar-img
黎羊Leon的沙龍
0會員
5內容數
黎羊Leon的沙龍的其他內容
2022/05/06
我是一名非本科系商科學生,甚至說是商科也不太算正確,只好說自己是一個懂得服務的大學生,但我現在只想透過程式碼來服務大眾。於是我開始經歷我的轉職路程,有些好笑、艱辛、荒謬、有趣、不合邏輯等像是門外漢一般的很多觀念,但努力補足。期許自己有一天可以對你說,「你好!我是一名軟體工程師,很高興認識你!」。
Thumbnail
2022/05/06
我是一名非本科系商科學生,甚至說是商科也不太算正確,只好說自己是一個懂得服務的大學生,但我現在只想透過程式碼來服務大眾。於是我開始經歷我的轉職路程,有些好笑、艱辛、荒謬、有趣、不合邏輯等像是門外漢一般的很多觀念,但努力補足。期許自己有一天可以對你說,「你好!我是一名軟體工程師,很高興認識你!」。
Thumbnail
2022/03/09
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
2022/03/09
從身邊最小的事物開始吧! 這是我學習完基礎JavaScript後第一個做成的Project,應該是每個前端都一定會做過的project,但對於自學的我非常有挑戰性,我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
Thumbnail
2022/03/09
座號是每一個學生擁有過的一個數字,但你有想過座號是怎麼排序的嗎? 座號的第一位通常都是姓氏筆畫最少的人如:丁、王等,那如果今天有兩個人都姓王的時候,會怎麼排序呢,當然最簡單的方式就是再比第二個字,那如果今天剛好三個字都一樣的話就會講求到資料的穩定性。 比較:
Thumbnail
2022/03/09
座號是每一個學生擁有過的一個數字,但你有想過座號是怎麼排序的嗎? 座號的第一位通常都是姓氏筆畫最少的人如:丁、王等,那如果今天有兩個人都姓王的時候,會怎麼排序呢,當然最簡單的方式就是再比第二個字,那如果今天剛好三個字都一樣的話就會講求到資料的穩定性。 比較:
Thumbnail
看更多