当前位置： 首页 > news >正文

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

news 2026/5/21 9:47:40

文章目录

    • 前言
    • Day 1 expanding-cards
    • Day 2 progress-steps

前言

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

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

Day 1 expanding-cards

效果预览
Day1
核心代码：

<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>

// 为所有的 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 中的样式控制
  • 通用的前进后退按钮禁用逻辑
    • 当前节点为第一个节点：后退按钮禁用
    • 当前节点为最后一个节点：前进按钮禁用
    • 其他情况，都不禁用

相关文章：

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

文章目录 前言Day 1 expanding-cardsDay 2 progress-steps 前言 发现一个没有用前端框架的练手项目&#xff0c;很适合我这种纯后端开发夯实基础&#xff0c;内含50个mini project&#xff0c;学习一下&#xff0c;做做笔记。 项目地址&#xff1a;https://github.com/bradtr…...

编程日记 2024/2/22 10:26:58

ELK入门(四)-logstash

Logstash Logstash 是开源的服务器端数据处理管道&#xff0c;能够同时从多个来源采集数据&#xff0c;转换数据&#xff0c;然后将数据发送到您最喜欢的存储库中。 Logstash 能够动态地采集、转换和传输数据&#xff0c;不受格式或复杂度的影响。利用 Grok 从非结构化数据中…...

编程日记 2024/2/22 10:24:57

laravel-admin的3个开发细节调整

在使用laravel-admin开发的过程中&#xff0c;根据官方开发文档Laravel admin | laravel-admin基本都能实现想要的效果&#xff0c;这里补充3个文档上没有描述的细节 Laravel8命令行创建控制器调整 在laravel-admin中可以使用php artisan admin:make UserController --modelAp…...

编程日记 2024/2/22 10:22:54

Redis--原理篇-数据结构(底层)

Redis数据结构 动态字符串SDS IntSet 统一大小并且内存地址连续 为了方便寻址 Dict 基本结构 扩容 收缩 Ziplist(P150 后半部分再看) Quicklist skiplist(满足中间查询 RedisObject...

编程日记 2024/2/22 10:20:52

OpenAI发布Sora模型，可根据文字生成逼真AI视频

早在2022年11月30日&#xff0c;OpenAI第一次发布人工智能聊天机器人ChatGPT&#xff0c;随后在全世界掀起了人工智能狂潮&#xff0c;颠覆了一个又一个行业。在过去的一年多的时间里&#xff0c;chatGPT的强大功能改变了越来越多人的工作和生活方式&#xff0c;成为了世界上用…...

编程日记 2024/2/22 10:19:51

视频生成模型：构建虚拟世界的模拟器 [译]

原文&#xff1a;Video generation models as world simulators 我们致力于在视频数据上开展生成模型的大规模训练。具体来说&#xff0c;我们针对不同时长、分辨率和宽高比的视频及图像&#xff0c;联合训练了基于文本条件的扩散模型。我们采用了一种 Transformer 架构&#…...

编程日记 2024/2/22 10:17:49

MySQL数据库基础（十二）：子查询（三步走）

文章目录 子查询&#xff08;三步走&#xff09; 一、子查询&#xff08;嵌套查询&#xff09;的介绍 二、子查询的使用 三、总结 子查询&#xff08;三步走&#xff09; 一、子查询&#xff08;嵌套查询&#xff09;的介绍 在一个 select 语句中,嵌入了另外一个 select …...

编程日记 2024/2/22 10:15:47

2-21算法习题总结

由于蓝桥杯的题,我不知道从怎么复制,就只能粘贴图片了 翻硬币 代码 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);String start sc.next();char[] starts start.toCharArray();String end sc…...

编程日记 2024/2/22 10:14:46

常见的排序算法整理

1.冒泡排序 1.1 冒泡排序普通版 每次冒泡过程都是从数列的第一个元素开始&#xff0c;然后依次和剩余的元素进行比较&#xff0c;若小于相邻元素&#xff0c;则交换两者位置&#xff0c;同时将较大元素作为下一个比较的基准元素&#xff0c;继续将该元素与其相邻的元素进行比…...

编程日记 2024/2/22 10:13:44

stm32——hal库学习笔记(定时器)

这里写目录标题 一、定时器概述&#xff08;了解&#xff09;1.1&#xff0c;软件定时原理1.2&#xff0c;定时器定时原理1.3&#xff0c;STM32定时器分类1.4&#xff0c;STM32定时器特性表1.5&#xff0c;STM32基本、通用、高级定时器的功能整体区别 二、基本定时器&#xff0…...

编程日记 2024/2/22 10:10:39

方法鉴权：基于 Spring Aop 的注解鉴权

在Spring框架中&#xff0c;可以使用面向切面编程&#xff08;AOP&#xff09;来实现注解鉴权。这通常涉及到定义一个切面&#xff08;Aspect&#xff09;&#xff0c;该切面会在方法执行前进行拦截&#xff0c;并根据注解value值来决定是否允许执行该方法。 简单思路&#xf…...

编程日记 2024/2/22 10:08:37

多模态相关论文笔记

(cilp) Learning Transferable Visual Models From Natural Language Supervision 从自然语言监督中学习可迁移的视觉模型 openAI 2021年2月 48页 PDF CODE CLIP(Contrastive Language-Image Pre-Training)对比语言图像预训练模型 引言 它比ImageNet模型效果更好&#xff0c…...

编程日记 2024/2/22 10:06:34

maven 打包命令

Maven是基于项目对象模型(POM project object model)&#xff0c;可以通过一小段描述信息&#xff08;配置&#xff09;来管理项目的构建&#xff0c;报告和文档的软件项目管理工具。 Maven的核心功能便是合理叙述项目间的依赖关系&#xff0c;通俗点讲&#xff0c;就是通过po…...

编程日记 2024/2/22 10:05:33

开源模型应用落地-业务优化篇（六）

一、前言 经过线程池优化、请求排队和服务实例水平扩容等措施，整个AI服务链路的性能得到了显著地提升。但是，作为追求卓越的大家，绝不会止步于此。我们的目标是在降低成本和提高效率方面不断努力，追求最佳结果。如果你们在实施AI项目方面有经验，那一定会对GPU服务器的高昂…...

编程日记 2024/2/22 10:04:33

编程笔记 Golang基础 015 数据类型：布尔类型

编程笔记 Golang基础 015 数据类型&#xff1a;布尔类型 在Go语言中&#xff0c;布尔类型&#xff08;bool&#xff09;是一种基本数据类型&#xff0c;用于表示逻辑值&#xff0c;即真或假、是或否的情况。它主要用于条件判断和逻辑运算。 定义与取值&#xff1a; Go语言中的布…...

编程日记 2024/2/22 9:58:26

腾讯云OSS文件上传功能

腾讯云COS介绍 腾讯云COS&#xff08;Cloud Object Storage&#xff09;是一种基于对象的存储服务&#xff0c;用于存储和管理海量的非结构化数据&#xff0c;如图片、音视频文件、备份数据等。它具有以下特点和优势&#xff1a; 高可靠性&#xff1a;采用分布式存储架构&…...

编程日记 2024/2/22 9:56:25

2023 re:Invent 用 PartyRock 10 分钟构建你的 AI 应用

前言 一年一度的亚马逊云科技的 re:Invent 可谓是全球云计算、科技圈的狂欢&#xff0c;每次都能带来一些最前沿的方向标&#xff0c;这次也不例外。在看完一些 keynote 和介绍之后&#xff0c;我也去亲自体验了一些最近发布的内容。其中让我感受最深刻的无疑是 PartyRock 了。…...

编程日记 2024/2/22 9:52:21

如何使用idea连接服务器上的mysql？

安全组进行开放 具体步骤 关闭防火墙 开放端口号 重启防火墙 firewall-cmd --reload在mysql进行修改配置 update user set host % where user root;flush privileges;使得其他网络也可以连接这个数据库 另外如果想要sqlyog或者其他图形化界面要连接到数据库可以看下面这…...

编程日记 2024/2/22 9:51:20

主流开发语言和开发环境介绍

主流开发语言和开发环境介绍文章目录 ⭐️ 主流开发语言&#xff1a;2024年2月编程语言排行榜&#xff08;TIOBE前十&#xff09;⭐️ 主流开发语言开发环境介绍1.Python1.1 **IDLE**1.2 **PyCharm**1.3 **Anaconda**1.4 **Jupyter Notebook**1.5 **Sublime Text** 2.C2.1 **De…...

编程日记 2024/2/22 9:49:18

samber/lo 库的使用方法： 处理 channel

samber/lo 库的使用方法&#xff1a; 处理 channel samber/lo 是一个 Go 语言库&#xff0c;提供了一些常用的集合操作函数&#xff0c;如 Filter、Map 和 FilterMap。汇总目录页面 这个库函数太多&#xff0c;因此我决定按照功能分别介绍&#xff0c;本文介绍的是 samber/lo…...

编程日记 2024/2/22 9:47:16

5分钟极速上手：B站视频转文字工具bili2text完整指南

5分钟极速上手&#xff1a;B站视频转文字工具bili2text完整指南 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 还在为整理B站视频内容而烦恼吗&#xff1f;每…...

编程新知 2026/5/21 9:09:26

BiliTools终极指南：免费下载B站视频的跨平台工具箱

BiliTools终极指南&#xff1a;免费下载B站视频的跨平台工具箱 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools Bili…...

编程新知 2026/5/21 9:09:26

如何测量WIFI通讯中客户端的漫游时间

在工业WiFi通信中会有很多涉及漫游的场景&#xff0c;例如AGV车辆在整个车间内移动&#xff0c;车间范围内会布置多个AP来完成信号覆盖&#xff0c;AGV车辆运动过程中远离已连接AP&#xff0c;接近另一个AP时就会发生漫游&#xff0c;由于工业通讯协议对实时性要求很高&#xf…...

编程新知 2026/5/21 8:50:39

实测对比：PC817自补偿 vs 专用线性光耦，在STM32/Arduino项目里到底该怎么选？

PC817自补偿 vs 专用线性光耦&#xff1a;嵌入式信号隔离方案实战指南 在STM32或Arduino项目中处理模拟信号隔离时&#xff0c;工程师们常陷入两难&#xff1a;是花时间用廉价光耦搭建自补偿电路&#xff0c;还是直接采购专用线性光耦模块&#xff1f;这个看似简单的选择背后&a…...

编程新知 2026/5/21 7:15:28

千川素材外包月烧3万，转易元AI自产省70%成本，跑量还更猛——真实账单对比

很多商家做千川投放时&#xff0c;最开始以为最贵的是投流预算&#xff0c;后来才发现&#xff0c;真正长期烧钱的其实是素材。计划每天要新视频&#xff0c;爆款跑起来要裂变&#xff0c;素材疲劳了要补货&#xff0c;全域推广还要不同场景、不同卖点、不同人群的素材矩阵。外…...

编程新知 2026/5/21 6:49:32

聊聊 KaiwuDB 的开源压测工具：kwdb-tsbs 上手分享

上一篇我们聊了一下通用 TSBS 工具《聊一聊TSBS&#xff1a;时序数据库跑分&#xff0c;为啥大家都用它&#xff1f;》 今天想就一家国内厂商开源的TSBS工具展开讲讲。怎么看这件事儿&#xff0c;怎么用&#xff0c;以及好不好用。 最近一直在玩时序数据库&#xff0c;做性能对…...

编程新知 2026/5/21 6:49:28

电池级氢氧化锂粉碎设备选型指南：氮气保护气流粉碎机详解

氢氧化锂&#xff08;LiOH&#xff09;具有易吸潮、强碱性、有一定粘附性的特点&#xff0c;且在电池级应用中对金属杂质污染零容忍。因此&#xff0c;行业主流不推荐传统的机械碾压式磨机&#xff08;如雷蒙磨&#xff0c;容易引入铁屑且密封难&#xff09;&#xff0c;而是首…...

编程新知 2026/5/21 6:36:47

ARMv8-A架构LDP与LDR内存加载指令详解

1. A64指令集内存加载指令概述在ARMv8-A架构的A64指令集中&#xff0c;LDP&#xff08;Load Pair&#xff09;和LDR&#xff08;Load Register&#xff09;是两类最基础且关键的内存加载指令。作为从事ARM架构开发多年的工程师&#xff0c;我经常需要在底层系统编程和性能优化中…...

编程新知 2026/5/21 5:17:22

Linux 软件包管理（含上机实例）

文章目录软件包管理一、知识要点1.rpm作用2.安装问题1&#xff1a;文件已被安装问题2&#xff1a;文件冲突问题3&#xff1a;未解决依赖关系3.卸载rpm包4.升级rpm包5.查询已安装的软件包的数据库6.验证软件包完整性二、YUM的使用yum简述yum命令集三、上机任务6 软件包管理 一、…...

编程新知 2026/5/21 5:01:53

UE5运行时动态调整游戏视口：解决UI遮挡导致物体位置偏移的实战方案

UE5运行时动态调整游戏视口&#xff1a;解决UI遮挡导致物体位置偏移的实战方案 当你在UE5项目中设计了一个精美的HUD界面&#xff0c;却发现那些半透明的UI元素正在悄悄改变游戏世界的坐标规则——原本应该出现在屏幕中心的角色突然偏离了位置。这不是视觉错觉&#xff0c;而是…...

编程新知 2026/5/21 4:41:23