# front_end-demos **Repository Path**: mirrors_singod/front_end-demos ## Basic Information - **Project Name**: front_end-demos - **Description**: 前端练手项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-09-25 - **Last Updated**: 2026-03-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # front_end-demos 前端练手项目，用于记录个人工作学习日常积累的demo。 | Name | Source Code | |:----:|:-----------:| | [koa+mysql实现定时邮件发送小网站](http://remind.fengxianqi.com) | | | [vue-todo-demo项目](http://demo.fengxianqi.com/vue-todo-demo/todo.html) | [code](https://github.com/fengxianqi/front_end-demos/tree/master/src/vue-todo-demo) | | [react-todo-demo项目](http://demo.fengxianqi.com/react/todo.html) | [code](https://github.com/fengxianqi/front_end-demos/blob/master/src/react/todo.html) | | [拖拽框实现文件上传](http://demo.fengxianqi.com/drag/index.html) | [code](https://github.com/fengxianqi/front_end-demos/blob/master/src/drag/index.html) | | [canvas实现一个画板](http://demo.fengxianqi.com/canvas/board.html) | [code](https://github.com/fengxianqi/front_end-demos/blob/master/src/canvas/board.html) | | [canvas画一个饼状图](http://demo.fengxianqi.com/canvas/piechart.html) | [code](https://github.com/fengxianqi/front_end-demos/blob/master/src/canvas/piechart.html) | | [vue国庆装逼计划h5活动页面(移动端)](http://demo.fengxianqi.com/national-h5/index.html) | [code](https://github.com/fengxianqi/front_end-demos/tree/master/src/national-h5) | | Angular英雄教程 | [code](https://github.com/fengxianqi/front_end-demos/tree/master/src/angular-hero) | | [各种音频格式测试](http://demo.fengxianqi.com/audio/audio-test.html) | | | [HTML5 Audio标签](http://demo.fengxianqi.com/audio/index.html) | [code](https://github.com/fengxianqi/front_end-demos/blob/master/src/audio/index.html) | | [HTML5 Video标签](http://demo.fengxianqi.com/video/index.html) | [code](https://github.com/fengxianqi/front_end-demos/blob/master/src/video/index.html) | | 数据结构-JS操作二叉树 | [code](https://github.com/fengxianqi/front_end-demos/blob/master/src/data-structure/binary-tree.html) | | Leetcode解题思路 | [code](https://github.com/fengxianqi/front_end-demos/tree/master/src/leetcode) | | Node使用protobuf | [code](https://github.com/fengxianqi/front_end-demos/tree/master/src/node-protobuf) | | Vue使用protobuf | [code](https://github.com/fengxianqi/front_end-demos/tree/master/src/vue-protobuf) | | px2rem | [code](https://github.com/fengxianqi/front_end-demos/tree/master/src/px2rem) | > 以下几课来源于有哪些适合新手练手的前端项目？。自己跟着一步一步写下来，源码放在GitHub上，非常感谢原项目作者。原生JavaScript学习,By Ferris #### 第一课 - 1.控制div属性 - 2.网页换肤 - 3.函数接收参数并弹出 - 4.用循环将三个Div变成红色 - 5.鼠标移入/移出改变样式 - 6. 记住密码提示框 #### 第二课 - 1.百度输入法 - 2.点击Div，显示其innerHTML - 3.求出数组中所有数字的和 - 4.弹出层效果 - 5.函数传参，改变Div任意属性的值 - 6.图片列表：鼠标移入/移出改变图片透明度 - 7.简易选项卡 - 8.简易JS年历 - 9.单一按钮显示/隐藏一播放列表收缩展开 - 10.提示框效果 - 11.鼠标移过，修改图片路径 - 12. 复选框（checkbox）全选/全不选/返选 #### 第三课 - 1.用typeof查看数据类型 - 2.用parseInt解析数字，并求和 - 3.累加按钮，自加1 - 4.输入两个数字，比较大小 - 5.页面加载后累加，自加1 - 6.判断数字是否为两位数 - 7.网页计算器 - 8.网页简易时钟 - 9.倒计时（100秒） #### 第四课 - 1.setTimeout应用 - 2.自动播放一幻灯片效果 - 3.自动改变方向一幻灯片效果 - 4.agruments应用一求出函数参数的总合 - 5.css函数一设置/读取对象的属性 - 6. 当前输入框高亮显示