跳到主要内容

编程练习题

CSS​

垂直方向对齐 #flex-ver​

用 Flex 布局，实现多个子项在垂直方向的居顶，居中，居底的对齐。

圣杯布局​

需求
  1. 垂直方向: header, footer 固定高度。中间部分撑满容器剩余部分。
  2. 水平方向: left, right 固定宽度。中间部分撑满容器剩余部分。

要实现的样式如下：

+ 号和 x 号按钮 #plus-close-btn​

要实现的样式如下：

骰子​

用 Flex 或 Grid 布局，实现的样式如下：

综合页面​

JavaScript​

实现 loadash 的 _.chunk 方法 #_.chunk​

数组的切分。

实现 loadash 的 _.concat 方法 #_.concat​

数组的拼接。

实现 loadash 的 _.curry 方法 #_.curry [未完成]​

DOM​

列表无限加载 #infinite-list​

列表滚动到底部，加载更多内容。

支持垂直和水平方向的列表。示例：

BOM​

实现 useLocalStroge​

框架​

React，Vue 等。

计数器 #count​

实现计数器功能。计数器是用以来计数的。

需求
  1. 展示数值。用输入框来展示当前数值。
  2. 修改数值。支持通过输入框，+ 和 - 按钮来改数值。点击+，数值增加1。点击-，数值减少1。
  3. 数值必须是整数。
  4. 数值的范围是: 5 到 15。
    1. 当数值达到最大或最小值时，隐藏对应的按钮。
    2. 当输入的数值大于最大值时，显示最大值。
    3. 当输入的数值小于最大值时，显示最小值。
  5. 优化项: 用 自定义 hooks 来抽离逻辑。

示例：

猜数字​

轻松的聚会游戏。

需求
  1. 主持人写下 1 到 100 之间的一个数字。
  2. 其他人轮流猜，猜到主持人写的数字，则游戏结束。
  3. 其他人猜的答案比写下数字大，主持人会说大了。猜的比写下数字小，主持人会说小了。

示例：

简单的下拉选择器 #select​

下拉选择器

需求
  1. 展示下拉选项。点击下拉框 或 "点我弹出选项" 按钮，展示下拉选项。
  2. 可以通过
  3. 选择选项。点击选项，则选择选项，并隐藏下拉内容。
  4. 点击下拉选择器外侧，隐藏下拉内容。

示例：

给很深的子组件传值 #passToDeepChildren​

父组件直接传值给很深的子组件传值。

需求
  1. 父组件直接传值给很深的子组件传值，但不通过中间组件传递。父组件和子组件均能获取和修改值。
  2. React 用 Context API 实现。Vue 用 Project/Inject 实现。
示例：

运动的球 #ball​

控制球的运动。

需求
  1. 能控制球的运动和暂停。
  2. 暂停时，可以修改球的位置，运动方向和速度。
  3. 球碰到边界后，会弹回来。速度不变，方向变反。
  4. 一共有三条命。碰到四面的边界，命减1。命的值为0时，游戏结束。
  5. 游戏结束后，可以重新开始游戏。
  6. 不同的命的球的颜色不同。三条命时，为绿色，两条命时，为黄色，一条命时，为红色。

示例：

待办事宜 [未完成]​

其他​

  • 拳皇连招练习工具 - 致青春
  • 康威生命游戏 - 上帝视角看生命的生和死
  • 艾宾浩斯记忆曲线 - 抗遗忘利器
  • 图片隐写技术 - 优雅的隐藏信息