前端项目-小米商城
首页的展示
首页的功能
1、搜索栏模糊查询
在我在输入框输入关键字的时候,会匹配关键字,如果我的存放的数据里面包含这些关机键字就会显示出来。做到模糊查询的效果。
2、实现搜索功能
在首页的搜索框点击搜索的时候,就会对你输入的关键字进搜索,比如你搜小米12,就会拿着这个关键词,用get请求,去访问小米官方商城的后端搜索接口,实现搜索功能。
3、轮播图(切换广告/海报)
这个轮播图每过3秒就会自动切换广告,我们也可以点击两边的按钮,实现上一张到下一张的切换的功能。当我们鼠标移动到图片上,会停止切换,失去焦点的时候继续自动播放。
4、秒杀功能
秒杀的倒计时实现,可以设置一个固定时间然后对这个时间进行倒计时,比如对12点进行倒计时,那么现在凌晨一点多分,所以显示还剩22小时。
5、吸顶
这个顶部这个标签的搜索栏,会在你浏览网页的时候从上面滚出来,原本是固定在页面最上面,当年往下浏览商品,他会慢慢出来,你可以在页面的任何地方用到这个搜索的功能和点击到这个标签栏的每个按钮。
商品详情页
放大镜功能
我们鼠标移入左侧图片的时候,会出现白色半透明阴影代表你放大的位置,然后右边会出现方大的细节的图片,然后当年移动鼠标,就可以改变要放大的位置,实现放大镜的效果。
购物车页面
购物车可以全选和单选你之前加购的商品中要支付的商品,然后根据选择计算出商品总数量和总价格,也可以对商品数量手动输入和加减号改变数量,之后小计也会跟着改变。还可以删除商品功能,删除后会重新计算总价和总数,也可以确认购买和全部清楚。
注册表单校验
可以对注册表表单的每个输入框进行校验,让输入的值必须复合规范才能提交,不然提交失败。
已经把项目开源到码云
我已将本次的JavaScript实训项目开源到gitee免费提供给大家学习,大家自行下载
用html-css-js做的小米商城: 用html、css、js做的小米官方商城的项目
SSH:git@gitee.com:pengzhanhong/front-end-of-xiaomi-mall.git
希望对大家有帮助,有用的麻烦点赞、收藏、关注,谢谢
我将会分享更多自己平时做过的项目和笔记
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhabehe
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13