| 编号 | 效果 | 在线演示(点击跳转) | 描述 |
|---|---|---|---|
| 01 | 3D盒子背景 | 演示地址 | 给图片盒子添加阴影效果，使盒子在分离后呈现出立体小方块的视觉效果 |
| 02 | 倒计时动画 | 演示地址 | 利用 js 的 remove 和 add 函数将存储有数字的几个标签动画按倒计时的顺序展现 |
| 03 | 导航栏最小化 | 演示地址 | 利用 js 的 toggle() 函数用于切换元素的显示/隐藏 |
| 04 | 标题打字输入 | 演示地址 | 利用 js 将文字切片，每次文字显示的长度增加 1，实现文字打字般逐渐出现的效果 |
| 05 | 背景图点击切换 | 演示地址 | 利用 js 存储一个 activeSlide 的图片下标，每次点击 ← 和 → 按钮便相应地减少和增加下标的值，同时切换slides中对应下标的图片为 active (图片透明度为 1 )； 利用 css 实现一层 bodyBg，一层蒙版，一层 slideBg(改变了视窗大小) |
| 06 | 模糊加载动画 | 演示地址 | 利用 js 设置一个计时器，每 30 毫秒调用一次 blurring 函数(降低背景图的模糊度，增加加载进度条的透明度) |
| 07 | 按钮点击波纹效果 | 演示地址 | 利用 clientX clientY offsetTop offsetLeft 四个函数获取鼠标在 body 和 父盒子距 body 的位置，计算后得到鼠标在按钮中的坐标信息，添加波纹类利用 css 实现圆波纹的放大和透明度的变化 |
| 08 | 文章摘要卡片模糊加载 | 演示地址 | 利用 js 设置一个计时器，给所有需要的元素添加 animated-bg 或 animated-bg-text 类，实现渐变色移动的动画效果，在2.5秒后移除所有动画背景类 |
| 09 | 调用接口实现随机笑话 | 演示地址 | 利用 fetch 获取 api 的笑话内容，在点击切换按钮后，自动获取新的笑话并显示 |
| 10 | 音量范围条 | 演示地址 | 调用 getComputedStyle().getPropertyValue() 函数，获取 input 和 label 的 range 宽度，该改变输入实时计算 label 距 左侧的 left 值 |
| 11 | 双击屏幕实现点赞 | 演示地址 | 利用 offset 和 client 计算鼠标双击位置，每次双击利用 css 生成小心心动画，1 秒内放大逐渐透明，同时统计点赞次数 |
| 12 | 两侧垂直滑块 | 演示地址 | 与背景图切换的思路类似，但是布局分为 aside 和 right-slide 两部分，垂直方向上改变图片，通过改变视窗和移动条形图位置实现滑块，activeSlideIndex 作为下标判断滑块是否到边界 |
| 13 | 按键得到键值 | 演示地址 | 事件监听按键的行为，keyCode key code 显示按键信息，但是不能够多键联按显示 |
| 14 | 卡片点击展开 | 演示地址 | 类似于拉手风琴，点击其中一副图片后，所有图片移除active类名，给选中图片添加active类名，flex 值的对比使手风琴的波纹显现 |
| 15 | 用户体验反馈 | 演示地址 | 利用 css 实现点击后的盒子阴影(与 14 的思路相同，移除所有 active，点击对象添加 avctive)，在 js 提交后，改变反馈盒子的内容为提交后的感谢 |
| 16 | 步骤进度条 | 演示地址 | 与14 15 的思路相同，js 记录步骤的下标，在超出限制后禁用按钮，同时超出下表的进度条和圆移除 active，在范围内的添加 active |
| 17 | 项目评价框 | 演示地址 | 判断一个项目具备的特点，高质量、运行快、低成本三项不能同时具备，监听三个开关是否为 true，将互斥的特点转换为 false(移除 active) |
| 18 | 表单输入保存 | 演示地址 | 用户登录表单的页面，重点是 input 框 focus 状态下的动画和点击提交按钮后，输入框清空 |
| 19 | 旋转加载动画 | 演示地址 | 利用 css 绘制三角形(借用正方形的 border)同时设置盒子的两个伪元素无限制重复旋转动画(infinite)，呈现出两个白色三角形追赶的视觉效果 |
| 20 | 图片轮播 | 演示地址 | demo 5 的背景图切换与其图片点击切换的原理相同，轮播则是设置 setInterval 每两秒调用一次切换函数，在无 click 操作的情况下正常运行，在发生 click 操作(点击上一张或下一张按钮)时，清空定时器并将其初始化 |
| 21 | 图片拖拽 | 演示地址 | draggable 标识元素 true 表示允许被拖拽；使用 drag 的相关函数实现拖动目标和释放目标的事件 |
| 22 | 隐藏搜索框 | 演示地址 | 利用 js 点击按钮后，给盒子添加 active，同时动画改变 input 的宽度 |
| 23 | 随机密码生成 | 演示地址 | 利用 js 的 random 函数生成特定范围的 Unicode 编码，封装成 getRandomLower() 等一系列函数 根据用户设置的条件(lower, upper, number, symbol, length)作为参数 generatedPassword 生成特定的密码，赋值给resultEl； 需要注意复制用的 document.execCommand 方法已废弃 |
| 24 | 背景清晰度反应密码强度 | 演示地址 | 主要是 css 中 filter 的使用，简单判断输入密码长度，对模糊度做相应变化 |
| 25 | 口袋妖怪图鉴 | 演示地址 | 利用 js 获取公共图鉴 api 的内容，具体是根据编号 id 拼接 url，得到单个口袋妖怪的信息(getPokemon)，通过 createPokemonCard 不断向页面中添加 div 盒子，盒子内包含口袋妖怪的详细描述（图片 属性 名字 编号） |
| 26 | 喝水量统计 | 演示地址 | 每天八杯水，利用 css 完成一个 2*4 的矩阵，对应八个杯子，每个杯子具有对应 idx，利用 js 监听 click 操作点击的杯子，计算目前的喝水量和待喝水量。一个循环点亮目前已喝水的量(idx < clickIndex)，同时计算已喝水量的百分比和待喝水量，更新 2L 大杯子的数值显示 remained 和 percentage 的高度值(updateBigCup) |
| 27 | github搜索用户生成概述 | 演示地址 | 利用 js 请求 github 的用户 api，获取用户 id 和仓库信息，将详细信息通过 addReposToCard 函数生成用户概述盒子呈现在网页上，如果不存在该用户则会显示错误信息卡片 |
| 28 | 滚动动画特效 | 演示地址 | 根据当前元素距页面的顶部的距离，判断是否展示元素，window.innerHeight 获取页面高度， getBoundingClientRect 获取某个 html 元素相对于视窗的位置集合，如果其距顶部距离是否超过页面高度的五分之四，则元素展示，滑动进入视线 |
| 29 | 移动端导航栏 | 演示地址 | 导航栏的图标是 flex 布局的基本实现，页面的改变与图片点击切换的原理相同，remove all 然后 clickItem show |
| 30 | 电影网站首页 | 演示地址 | 调用电影网站(themoviedb.org)的 api，获取电影的名称、评分、封面和简介，利用 css 实现 flex 布局和鼠标悬停时的简介滑出效果 |
| 31 | 问卷页面 | 演示地址 | 数组存储了固定的四道前端题，记录标准答案和每次填写的 answer，使用 score 记录回答正确的题目，回答完毕后提示当前回答正确的题目数， reload 按钮完成问卷初始化(网页刷新) |
| 32 | 随机图片生成 | 演示地址 | 调用随机图片的 api 获取，通过生成随机的数字作为随机图片的索引，调用 15 次获得 5*3 张图片，图片的宽高在 300px 左右(http://source.unsplash.com/random/300x300) |
| 33 | 静态导航栏 | 演示地址 | 类似于博客的首页封面，nav + header-bg(伪元素蒙版) + post 的样式，实现一个根据鼠标向下滚动的距离判断 nav 是否需要切换样式 |
| 34 | 电商数字增长特效 | 演示地址 | 并不是利用 css 实现数字跳动式增加的动画特效，而是根据设置的目标数值(target)及段数得到每毫秒增加的数值，打开页面后，在数值小于目标的情况下，持续调用 updateCounter，在到达目标后停止 |
| 35 | 邮件验证码输入 | 演示地址 | 利用 css 实现一个邮箱验证身份的页面，同时 js 监听用户按键的事件(keydown)，在输入一位验证码后，10 毫秒后自动聚焦输入到下一位验证码(focus) |