宁波网站开发rswl,山东省住房和城乡建设厅网站注册中心,谷歌官网,做网站调用无广告视频文章目录 前言Day 1 expanding-cardsDay 2 progress-steps 前言
发现一个没有用前端框架的练手项目#xff0c;很适合我这种纯后端开发夯实基础#xff0c;内含50个mini project#xff0c;学习一下#xff0c;做做笔记。
项目地址#xff1a;https://github.com/bradtr… 文章目录 前言Day 1 expanding-cardsDay 2 progress-steps 前言
发现一个没有用前端框架的练手项目很适合我这种纯后端开发夯实基础内含50个mini project学习一下做做笔记。
项目地址https://github.com/bradtraversy/50projects50days
Day 1 expanding-cards
效果预览 核心代码
bodydiv classcontainer!--active 标识被点击的图片 --div classpanel active /divdiv classpanel /divdiv classpanel /divdiv classpanel /divdiv classpanel /div/divscript srcscript.js/script/body// 为所有的 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
效果预览 核心代码
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 falsenext.disabled false}
}
知识点总结
Day1 中的样式控制通用的前进后退按钮禁用逻辑 当前节点为第一个节点后退按钮禁用当前节点为最后一个节点前进按钮禁用其他情况都不禁用
