文章目录
-
- 前言
- [Day 1 expanding-cards](#Day 1 expanding-cards)
- [Day 2 progress-steps](#Day 2 progress-steps)
前言
发现一个没有用前端框架的练手项目,很适合我这种纯后端开发夯实基础,内含50个mini project,学习一下,做做笔记。
Day 1 expanding-cards
核心代码:
html
<body>
<div class="container">
<!--active 标识被点击的图片 -->
<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>
js
// 为所有的 panel 注册点击事件
panels.forEach(panel => {
panel.addEventListener('click', () => {
// 清空所有 active 样式
removeActiveClasses()
// 激活被点击 panel 的 active样式
panel.classList.add('active')
})
})
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}
知识点总结:
- 响应式布局
flex: 5;
- 操作
classList
可以动态修改节点的class
Day 2 progress-steps
核心代码:
js
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
}
}
知识点总结:
- Day1 中的样式控制
- 通用的前进后退按钮禁用逻辑
- 当前节点为第一个节点:后退按钮禁用
- 当前节点为最后一个节点:前进按钮禁用
- 其他情况,都不禁用