首页的展示

首页的功能

1、搜索栏模糊查询

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

2、实现搜索功能

 

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

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

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

4、秒杀功能

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

5、吸顶

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

商品详情页

放大镜功能

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

购物车页面

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

注册表单校验

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

已经把项目开源到码云

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

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

SSHgit@gitee.com:pengzhanhong/front-end-of-xiaomi-mall.git

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

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