利⽤jquery和原⽣JS实现简易的商城⽹页
⼀、在实现商城的功能中,主要使⽤的有html5的弹性盒布局,booterstrap,jquery,js,css,sass。
1.利⽤booterstrap来实现快速布局,实现购物车的静态页⾯。
需要注意的是booterstrap的布局⼀般都是响应式布局,所以在使⽤的时候尽量使整个页⾯都通过booterstrap来布局,否则会出现缩⼩页⾯的时候,
布局会发⽣错乱。在这⾥由于时间有限,使⽤了col-xs-3类的CSS效果,在页⾯缩⼩时尽量避免错乱的样式。
2.选购商品存储使⽤localstorage
数据存储使⽤mysql会⽅便很多,但这⾥我⽤的是localstorage来存储主要的账号密码,选取的商品详情,⾃⼰写了个JSON⽂件来模拟实现数据库,利⽤ajax来请求获取JSON
⾥⾯的数据,在渲染到页⾯上,点击购物车的时候,利⽤COOKIE来存储商品ID,并通过商品id来获取商品的固定详情,在选择⼿机型号和颜⾊的时候⼀并存储到localstorage
商品状态下的value⾥,由于使⽤的是localstorage,value⾥的数据都是字符串形式的,所以在处理数据的同时会⽐较⿇烦。因⽽在添加数据的时候我预先加了个\符号来分隔每⼀个商品,再通过数组分割来获取商品数组,⼆次分割成⼆维数组,这样就能便于将数据选然到页⾯上了。这⾥会遇到⼀个问题,就是删除数据的时候,如何处理\,这⾥是利⽤正则替换来处理数据,实现删除功能。
3.注册
js获取json的key和value 注册界⾯⽐较简单主要就是正则验证,实时判断密码强弱,使⽤keyup事件。
4.登录
登录主要判断账户存在与否或者密码正确并给予提⽰。成功之后会跳转到⾸页。并且将⽤户状态设置为true,也就是已登录状态,并将⽤户的信息,显⽰在页⾯左上⾓,
这⾥可以做⼀个⽤户个⼈界⾯,⽤来管理个⼈信息,银⾏卡,修改密码,收货地址之类的。
5.jquery动画特效和其他特效
jquery动画在使⽤animate写下拉菜单的时候会产⽣bug,使⽤stop⽅法能解决动画重复运⾏等⼀些动画问题,然⽽当⿏标快速触发事件的时候即使在避免事件冒泡的情况下,
也会产⽣动画的轻微闪烁问题。
购物车放⼤镜,在写放⼤镜的时候主要注意的是要获取滚动条⾼度来实现放⼤镜的上下距离,否则在页⾯下拉的时候会出现bug。
导航栏动画和轮播图没什么bug。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论