前端项目-小米商城

首页的展示

首页的功能

1、搜索栏模糊查询

在我在输入框输入关键字的时候，会匹配关键字，如果我的存放的数据里面包含这些关机键字就会显示出来。做到模糊查询的效果。

2、实现搜索功能

 

在首页的搜索框点击搜索的时候，就会对你输入的关键字进搜索，比如你搜小米12，就会拿着这个关键词，用get请求，去访问小米官方商城的后端搜索接口，实现搜索功能。

3、轮播图（切换广告/海报）

这个轮播图每过3秒就会自动切换广告，我们也可以点击两边的按钮，实现上一张到下一张的切换的功能。当我们鼠标移动到图片上，会停止切换，失去焦点的时候继续自动播放。

4、秒杀功能

秒杀的倒计时实现，可以设置一个固定时间然后对这个时间进行倒计时，比如对12点进行倒计时，那么现在凌晨一点多分，所以显示还剩22小时。

5、吸顶

这个顶部这个标签的搜索栏，会在你浏览网页的时候从上面滚出来，原本是固定在页面最上面，当年往下浏览商品，他会慢慢出来，你可以在页面的任何地方用到这个搜索的功能和点击到这个标签栏的每个按钮。

商品详情页

放大镜功能

我们鼠标移入左侧图片的时候，会出现白色半透明阴影代表你放大的位置，然后右边会出现方大的细节的图片，然后当年移动鼠标，就可以改变要放大的位置，实现放大镜的效果。

购物车页面

购物车可以全选和单选你之前加购的商品中要支付的商品，然后根据选择计算出商品总数量和总价格，也可以对商品数量手动输入和加减号改变数量，之后小计也会跟着改变。还可以删除商品功能，删除后会重新计算总价和总数，也可以确认购买和全部清楚。

注册表单校验

可以对注册表表单的每个输入框进行校验，让输入的值必须复合规范才能提交，不然提交失败。

已经把项目开源到码云

我已将本次的JavaScript实训项目开源到gitee免费提供给大家学习，大家自行下载

用html-css-js做的小米商城: 用html、css、js做的小米官方商城的项目

SSH：[email protected]:pengzhanhong/front-end-of-xiaomi-mall.git

希望对大家有帮助，有用的麻烦点赞、收藏、关注，谢谢

我将会分享更多自己平时做过的项目和笔记