forrany / Web-Project

前端练手小项目

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

VK的前端进阶之路...

博客-- VK Blog

博客开通后,原在github写的前端相关总结和文章都搬家啦,传送门

文章目录:

1.VK的秋招前端奇遇记(一)

2.VK的秋招前端奇遇记(二)

3.VK的秋招前端奇遇记(三)

4.VK的秋招前端奇遇记(四)

5.番外篇:前端面试&笔试算法 Algorithm

6.JS时间机制之Microtasks & Tasks & Queues

7.Generator 异步原理

8.React是如何工作的

9.可能是最好的正则表达式课程的笔记啦

...更多

D3数据可视化

  1. D3初印象,画一个笑脸吧 认识SVG,熟悉SVG的常用操作,在线预览
  2. D3之柱状图 学习D3的数据读取方法,比例尺、坐标轴和柱状图的绘制方法,在线预览
  3. 更新中...

项目清单

  1. 轮播图 -- 利用CSS3 transition属性,写出简介的轮播图插件 原生js
  2. 别踩白块 -- Jquery初识,获取元素,动态生成div, jQuery元素的属性、方法实现动态效果和游戏逻辑 演示地址:别踩白块在线
  3. 拼图游戏 -- Jquery进阶应用。 对鼠标事件"mousedown" "mousemove" "mouseup" 的应用实现拖拽; 数组保存、指导拼图位置; 数组乱序方法的应用; 演示地址:拼图游戏在线
  4. 炫酷菜单导航 -- CSS3属性的应用: 通过transform: rotateZ()属性以及transition属性实现动态效果; 演示地址:导航在线
  5. 贪吃蛇游戏 -- 原生JS深入学习,oop面向对象编程。 蛇身跟随蛇头运动逻辑,蛇头碰撞检测(包括墙壁和蛇身); 键盘事件的练习(keydown) 演示地址:贪吃蛇在线
  6. Canvas动画应用-- 利用Canvas绘制动画弹球,oop面向对象编程,碰撞检测,速度回弹等。 演示地址:Canvas小球

React项目实战

应聘美团前端实习岗位时所做的一款数据查询组件,基于React框架,主要实现了:

  • 整体UI的设计,根据所给界面,进行CSS布局和渲染;

  • 查询功能的实现,可以根据关键字、日期、标签等进行数据的检索和查询;

  • 表格翻页组件,可以根据需求,请求数据并将所有数据按需展示;

  • 输入数据的关键字验证与提示功能

演示地址:后台管理系统

About

前端练手小项目


Languages

Language:JavaScript 51.9%Language:Vue 27.4%Language:CSS 9.8%Language:HTML 8.7%Language:Stylus 1.2%Language:SCSS 1.1%