【前端】夯实基础 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…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识：什么是 B-Tree 和 BTree？ B-Tree（平衡多路查找树） BTree（B-Tree 的变种） 二、结构对比：一张图看懂 三、为什么 MySQL InnoDB 选择 BTree？ 1. 范围查询更快 2…...
在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤： 第一步： 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为： // 改为 v…...