前端笔记

我正在参加码上掘金体验活动，详情：show出你的创意代码块 一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情 前言 前文：一个dark mode的动画 一二

还记得去年更新了几个 Dark Mode 的动画，比如这个按钮动画，还有这个拉绳动画，今年掘金出了一个码上掘金的playground，就顺势再更新几个吧~

想参加游戏活动，但一点儿思路都没有，今天突然发现活动就要截止了，最后一天了，真不能再摆下去了，花了两个小时复刻了一个植物大战僵尸，持续更新中...

在实际项目当中我们经常会出现以下问题： 代码可以跑通，但是业务上总出bug 业务上没有异常，但是代码执行的过程中总是出现

一个例子：判断是否为4的幂 342. 4的幂 - 力扣（LeetCode） (leetcode-cn.com) 给定一个

一个例子：交通灯切换 让你用原生JS实现一个交通灯切换的组件，怎么抽象？怎么提高扩展性和复用性？ 新手入门 你可能会觉得

嗟予贫贱年将老，学古忧时满怀抱。 前言 如何写好JS，什么才叫好的代码？这是个很难回答的问题，一千个人中有一千个哈姆雷特

实际业务中我们经常需要限制用户的操作次数，比如一次性的HTTP请求，以及一些异步交互。 如图todo list

本篇将对上篇写的轮播图进行重构，使其具有更好的扩展性和可复用性。 重构：插件化 比如说上篇轮播图显示第几个图片，第几个小圆

嗟予贫贱年将老，学古忧时满怀抱。 例子：轮播图 1. 结构设计 轮播图是一个典型的列表结构，我们可以用无序列表

业精于勤，荒于嬉；行成于思，毁于随。 我们要明白：把CSS，JS放到单文件中这种代码层面的分离并不是各司其责，各司其责要做

业精于勤，荒于嬉；行成于思，毁于随。 box-sizing 而如图的border-box包含内边距和边框，不包含外边距，其

温故而知新，可以为师矣。 选择器特异度 Specificity 继承 如果一个属性不能被继承，但想要其继承，可以显示继承，

温故而知新，可以为师矣。 字体样式 font-family 字体列表最后写上通用字体族（即图片所示） 英文字体放在中文字体

温故而知新，可以为师矣。 CSS即层叠样式表，我们可以通过以下方式来修改h1标题的颜色： 其中各部分

青训营笔记，算是又一次查漏补缺。前端是什么，一句话总结：使用Web技术栈解决多端GUI（图形用户界面）交互问题。

【3/10】第三个来了，这次写了一个拉绳的简单动画来开关dark mode，效果如封面所示。 在线预览链接，附源码！ 目标依旧是10个

如封面所示，继 Dark Mode（1），又写了一个复杂点的 Dark Mode，不多BB直接上代码~目标十种写法

如标题，仅仅是一个最简单的实现，还在学习的过程中。废话不多说直接上代码！目标：10种方式！我要打十个！

突发奇想，不用框架，自己复刻一个VS Code的调色板，刚开始学前端看见啥都想试着用HTML+CSS+JS写一个。