# weipinhui

**Repository Path**: Ling16-X/weipinhui

## Basic Information

- **Project Name**: weipinhui
- **Description**: 唯品会的注册，登录，首页，商品列表，商品详情，购物车等页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-08-17
- **Last Updated**: 2021-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# weipinhui

#### 介绍

唯品会的注册，登录，首页，商品列表，商品详情，购物车等页面，本项目为学习练手项目，非商业用途。

1.注册功能：正则验证

2.登录功能：登录成功将用户信息通过localStorage存入本地

3.首页：静态页面，导航，轮播图，当页面滚动距离大于一定距离时，商品分类会变成固定窗口，鼠标点击商品进入商品列表页面

4.商品列表：显示后台所添加的所有商品，当页面滚动距离大于一定距离时，会形成一个固定窗口，滑过每个商品的时候有hover效果。点击商品进入商品详情页面

5.商品详情：根据传入的商品id展示商品详情，将要加入购物车的商品数量增加，减少，以及计算价格点击颜色和尺码的时候能够来回切换。点击加入购物车的时候，右边会出现“加入购物车成功，进入购物车”窗口。3秒内不进入，窗口会消失。

6.购物车：显示用户购物车的信息，对商品数量增加及减少和删除，选中商品时，会开启倒计时，并且计算总价及商品数量。对商品种类的增加和减少，倒计时会进行相应的处理。

#### 软件架构
html为html脚本文件夹
css为样式表文件夹
js为javascript及jquery脚本文件夹
swiper为项目所需轮播插件文件夹
img为项目静态资源文件夹


#### 使用教程

下载项目代码，进入根目录打开index.html，即可看到唯品会练手项目展示。


#### 特技

1.  swiper轮播
2.  jquery脚本
3.  监听滚动页面交互
4.  定时关闭购物袋
5.  jquery选项卡制作
6.  购物袋总价动态实现
7.  购物袋选择商品开启倒计时实现

#### git仓库地址

https://gitee.com/twelvethth/weipinhui