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

前言

发现一个没有用前端框架的练手项目，很适合我这种纯后端开发夯实基础，内含50个mini project，学习一下，做做笔记。

• 项目地址：https://github.com/bradtraversy/50projects50days

Day 1 expanding-cards

效果预览

核心代码：

body>
    div class="container">
      
      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 注册点击事件
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

效果预览

核心代码：

fu服务器托管网nction 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 中服务器托管网的样式控制
• 通用的前进后退按钮禁用逻辑
  • 当前节点为第一个节点：后退按钮禁用
  • 当前节点为最后一个节点：前进按钮禁用
  • 其他情况，都不禁用

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: ArcGIS API for JavaScript 4.X 本地部署(js，字体)

0 目录（4.19） /4.19/ 1 修改文件 1.1 init.js 编辑器打开/4.19/init.js搜索文本[HOSTNAME_AND_PATH_TO_JSAPI]，然后将其连同前面的https://替换为http://ip地址/4.19，可以是lo…