前言
發(fā)現(xiàn)一個(gè)沒(méi)有用前端框架的練手項(xiàng)目，很適合我這種純后端開(kāi)發(fā)夯實(shí)基礎(chǔ)，內(nèi)含50個(gè)mini project，學(xué)習(xí)一下，做做筆記。
- 項(xiàng)目地址：https://github.com/bradtraversy/50projects50days
Day 1 expanding-cards
效果預(yù)覽
核心代碼：
<body>
<div class="container">
<!--active 標(biāo)識(shí)被點(diǎn)擊的圖片 -->
<div class="panel active" >
</div>
<div class="panel" >
</div>
<div class="panel" >
</div>
<div class="panel" >
</div>
<div class="panel" >
</div>
</div>
<script src="script.js"></script>
</body>
// 為所有的 panel 注冊(cè)點(diǎn)擊事件
panels.forEach(panel => {
panel.addEventListener('click', () => {
// 清空所有 active 樣式
removeActiveClasses()
// 激活被點(diǎn)擊 panel 的 active樣式
panel.classList.add('active')
})
})
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}
知識(shí)點(diǎn)總結(jié)：
- 響應(yīng)式布局
flex: 5; - 操作
classList可以動(dòng)態(tài)修改節(jié)點(diǎn)的class
Day 2 progress-steps
效果預(yù)覽
核心代碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-835899.html
function update() {
// Day1 中的處理方式
circles.forEach((circle, idx) => {
if(idx < currentActive) {
circle.classList.add('active')
} else {
circle.classList.remove('active')
}
})
// 按鈕的禁用控制
if(currentActive === 1) {
prev.disabled = true
} else if(currentActive === circles.length) {
next.disabled = true
} else {
prev.disabled = false
next.disabled = false
}
}
知識(shí)點(diǎn)總結(jié)：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-835899.html
- Day1 中的樣式控制
- 通用的前進(jìn)后退按鈕禁用邏輯
- 當(dāng)前節(jié)點(diǎn)為第一個(gè)節(jié)點(diǎn)：后退按鈕禁用
- 當(dāng)前節(jié)點(diǎn)為最后一個(gè)節(jié)點(diǎn)：前進(jìn)按鈕禁用
- 其他情況，都不禁用
到了這里，關(guān)于【前端】夯實(shí)基礎(chǔ) css/html/js 50個(gè)練手項(xiàng)目（持續(xù)更新）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
