【前端】夯实基础 css/html/js 50个练手项目(持续更新)
文章目录
- 前言
- Day 1 expanding-cards
- Day 2 progress-steps
前言
发现一个没有用前端框架的练手项目,很适合我这种纯后端开发夯实基础,内含50个mini project,学习一下,做做笔记。
- 项目地址:https://github.com/bradtraversy/50projects50days
Day 1 expanding-cards
效果预览

核心代码:
<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 前言 发现一个没有用前端框架的练手项目,很适合我这种纯后端开发夯实基础,内含50个mini project,学习一下,做做笔记。 项目地址:https://github.com/bradtr…...
ELK入门(四)-logstash
Logstash Logstash 是开源的服务器端数据处理管道,能够同时从多个来源采集数据,转换数据,然后将数据发送到您最喜欢的存储库中。 Logstash 能够动态地采集、转换和传输数据,不受格式或复杂度的影响。利用 Grok 从非结构化数据中…...
laravel-admin的3个开发细节调整
在使用laravel-admin开发的过程中,根据官方开发文档Laravel admin | laravel-admin基本都能实现想要的效果,这里补充3个文档上没有描述的细节 Laravel8命令行创建控制器调整 在laravel-admin中可以使用php artisan admin:make UserController --modelAp…...
Redis--原理篇-数据结构(底层)
Redis数据结构 动态字符串SDS IntSet 统一大小并且内存地址连续 为了方便寻址 Dict 基本结构 扩容 收缩 Ziplist(P150 后半部分再看) Quicklist skiplist(满足中间查询 RedisObject...
OpenAI发布Sora模型,可根据文字生成逼真AI视频
早在2022年11月30日,OpenAI第一次发布人工智能聊天机器人ChatGPT,随后在全世界掀起了人工智能狂潮,颠覆了一个又一个行业。在过去的一年多的时间里,chatGPT的强大功能改变了越来越多人的工作和生活方式,成为了世界上用…...
视频生成模型:构建虚拟世界的模拟器 [译]
原文:Video generation models as world simulators 我们致力于在视频数据上开展生成模型的大规模训练。具体来说,我们针对不同时长、分辨率和宽高比的视频及图像,联合训练了基于文本条件的扩散模型。我们采用了一种 Transformer 架构&#…...
MySQL数据库基础(十二):子查询(三步走)
文章目录 子查询(三步走) 一、子查询(嵌套查询)的介绍 二、子查询的使用 三、总结 子查询(三步走) 一、子查询(嵌套查询)的介绍 在一个 select 语句中,嵌入了另外一个 select …...
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…...
常见的排序算法整理
1.冒泡排序 1.1 冒泡排序普通版 每次冒泡过程都是从数列的第一个元素开始,然后依次和剩余的元素进行比较,若小于相邻元素,则交换两者位置,同时将较大元素作为下一个比较的基准元素,继续将该元素与其相邻的元素进行比…...
stm32——hal库学习笔记(定时器)
这里写目录标题 一、定时器概述(了解)1.1,软件定时原理1.2,定时器定时原理1.3,STM32定时器分类1.4,STM32定时器特性表1.5,STM32基本、通用、高级定时器的功能整体区别 二、基本定时器࿰…...
方法鉴权:基于 Spring Aop 的注解鉴权
在Spring框架中,可以使用面向切面编程(AOP)来实现注解鉴权。这通常涉及到定义一个切面(Aspect),该切面会在方法执行前进行拦截,并根据注解value值来决定是否允许执行该方法。 简单思路…...
多模态相关论文笔记
(cilp) Learning Transferable Visual Models From Natural Language Supervision 从自然语言监督中学习可迁移的视觉模型 openAI 2021年2月 48页 PDF CODE CLIP(Contrastive Language-Image Pre-Training)对比语言图像预训练模型 引言 它比ImageNet模型效果更好,…...
maven 打包命令
Maven是基于项目对象模型(POM project object model),可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工具。 Maven的核心功能便是合理叙述项目间的依赖关系,通俗点讲,就是通过po…...
开源模型应用落地-业务优化篇(六)
一、前言 经过线程池优化、请求排队和服务实例水平扩容等措施,整个AI服务链路的性能得到了显著地提升。但是,作为追求卓越的大家,绝不会止步于此。我们的目标是在降低成本和提高效率方面不断努力,追求最佳结果。如果你们在实施AI项目方面有经验,那一定会对GPU服务器的高昂…...
编程笔记 Golang基础 015 数据类型:布尔类型
编程笔记 Golang基础 015 数据类型:布尔类型 在Go语言中,布尔类型(bool)是一种基本数据类型,用于表示逻辑值,即真或假、是或否的情况。它主要用于条件判断和逻辑运算。 定义与取值: Go语言中的布…...
腾讯云OSS文件上传功能
腾讯云COS介绍 腾讯云COS(Cloud Object Storage)是一种基于对象的存储服务,用于存储和管理海量的非结构化数据,如图片、音视频文件、备份数据等。它具有以下特点和优势: 高可靠性:采用分布式存储架构&…...
2023 re:Invent 用 PartyRock 10 分钟构建你的 AI 应用
前言 一年一度的亚马逊云科技的 re:Invent 可谓是全球云计算、科技圈的狂欢,每次都能带来一些最前沿的方向标,这次也不例外。在看完一些 keynote 和介绍之后,我也去亲自体验了一些最近发布的内容。其中让我感受最深刻的无疑是 PartyRock 了。…...
如何使用idea连接服务器上的mysql?
安全组进行开放 具体步骤 关闭防火墙 开放端口号 重启防火墙 firewall-cmd --reload在mysql进行修改配置 update user set host % where user root;flush privileges;使得其他网络也可以连接这个数据库 另外如果想要sqlyog或者其他图形化界面要连接到数据库可以看下面这…...
主流开发语言和开发环境介绍
主流开发语言和开发环境介绍文章目录 ⭐️ 主流开发语言:2024年2月编程语言排行榜(TIOBE前十)⭐️ 主流开发语言开发环境介绍1.Python1.1 **IDLE**1.2 **PyCharm**1.3 **Anaconda**1.4 **Jupyter Notebook**1.5 **Sublime Text** 2.C2.1 **De…...
samber/lo 库的使用方法: 处理 channel
samber/lo 库的使用方法: 处理 channel samber/lo 是一个 Go 语言库,提供了一些常用的集合操作函数,如 Filter、Map 和 FilterMap。汇总目录页面 这个库函数太多,因此我决定按照功能分别介绍,本文介绍的是 samber/lo…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
