【前端】夯实基础 css/html/js 50个练手项目(持续更新)

文章目录

    • 前言
    • [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 中的样式控制
  • 通用的前进后退按钮禁用逻辑
    • 当前节点为第一个节点:后退按钮禁用
    • 当前节点为最后一个节点:前进按钮禁用
    • 其他情况,都不禁用
相关推荐
墨如初见7 分钟前
vue前端进行AES加密,JAVA对其进行AES解密
java·前端·vue.js
液态不合群7 分钟前
Js内建对象
前端·javascript·vue.js
苹果电脑的鑫鑫9 分钟前
uni-app接口调用以及封装
前端·javascript·uni-app
码蜂窝编程官方11 分钟前
【含开题报告+文档+源码】基于Web的房地产销售网站的设计与实现
java·前端·vue.js·spring boot·spring
提笔惊蚂蚁13 分钟前
java-web-day7-会话跟踪技术
java·开发语言·前端·程序人生
遇见小美好y19 分钟前
自己生成的页面,保存为图片,并下载word
前端·javascript·word
y先森24 分钟前
js实现漂亮的注册页面(js动态注册页面)
前端·javascript·css
想做白天梦1 小时前
CSS:基础选择器,文字控制属性(HTML)
前端·css
涔溪1 小时前
监听el-table中 自定义封装的某个组件的值发现改变调用函数
前端·vue.js·elementui
@动感superman1 小时前
CSS基础知识六(浮动的高度塌陷问题及解决方案)
前端·css·html·css3·html5