# start

**Repository Path**: min_hacker/start

## Basic Information

- **Project Name**: start
- **Description**: 计较棒的作品
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## js-practice
JavaScript实践案例    

#### UI

> 该部分是主要结合阅读element ui源码实现，使用JS实现核心的功能以及相应的样式（并不完全实现所有功能），旨在低学习成本阐述相应的实现思路

**button**

![音乐播放控制条](./images/button.png)

**switch**

![切换按钮](./images/switch.png)

**slider**

![slider](./images/slider.png)

**input**

![input](./images/input.png)    

**loading**     
![loading](./images/loading.png)     

**radio**    
![radio](./images/radio.png)   

**checkbox**   
![checkbox](./images/checkbox.png)   

**rate**    
![rate](./images/rate.png)  

**tooltip**      
![tooltip](./images/tooltip.png)   

**message**    
![message](./images/message.png)   

**tabs**    
![tabs](./images/tabs.png)    

**collapse**     
![collapse](./images/collapse.png)   

**badge**     
![badge](./images/badge.png)    

**carousel**   
![carousel](./images/carousel.png)  

**scrollbar**    
![scrollbar](./images/scrollbar.png)   

**select**    
![select](./images/select.png)   

**Notification**   
![notice](./images/notice.png)  

**MessageBox**   
![messageBox](./images/messageBox.png)  

**Color-Picker**    
![colorPicker](./images/colorPicker.png)    

**Upload**    
> 上传进度以及上传之后查看删除都没有在页面体现，你可以通过控制台查看上传进度
![upload](./images/upload.png)    

**Table**     
> 该demo实现固定表头和固定列（只固定在左侧）的效果    
![table](./images/table.gif)  

**Cascader**   
> 级联选择器    
![cascader](./images/cascader.gif)    

**Transfer**   
![transfer](./images/transfer.png)    

#### 音乐播放器

[音乐播放博客文章](http://blog.csdn.net/s1879046/article/details/77898167)     
实现效果：    
![音乐播放控制条](./images/audio.png)

#### 音频歌词同步
[音频歌词同步博客文章](http://blog.csdn.net/s1879046/article/details/78127201)    
实现效果：     
![音频歌词同步](./images/audioLyric.png)
#### 日期控件     
[日期控件博客文章](http://blog.csdn.net/s1879046/article/details/78241980)     
实现效果：         
![日期选择](./images/date-s.png)    
![日期范围选择](./images/date-r.png)

#### 视频播放器
[视频播放博客文章](http://blog.csdn.net/s1879046/article/details/78072683)    
实现效果：     
![视频播放](./images/video.png)

#### 粒子烟花效果    
[粒子烟花](http://blog.csdn.net/s1879046/article/details/76468768)    
#### 简易模块加载器    
[简易模块加载器博客文章](http://blog.csdn.net/s1879046/article/details/78196683)      
#### 俄罗斯方块
[俄罗斯方块博客文章](http://blog.csdn.net/s1879046/article/details/79298234)     
实现效果：    
![俄罗斯方块](./images/tetris.png)    

#### 视觉差效果浅析demo效果     
[视觉差效果文章](https://blog.csdn.net/s1879046/article/details/81366042)    
![视觉差效果浅析](./images/parallax.gif)