本次期末大作业实验项目的总体介绍:
基于HTML5 Bootstrap4 jQuery进行设计于开发,广泛使用响应式布局系统,确保在不同分辨率屏幕下的网页呈现。在JavaScript的开发过程中,广泛使用了ECMAScript6标准(即一些ES6的特性)。项目共分为四个模块界面:主页、购物车、注册页面与商品详情页面。
在线演示
具体的演示效果可以访问演示地址来查看
https://demo.titan6.cn/titanshop/
主页部分
主页部分主要实现了导航栏、主页Banner轮播图、商品列表页以及Footer。其中导航栏与Footer为了保持整个项目的设计一致性,在其他页面也同样引入。
主页Banner轮播图的实现,使用的是Bootstrap内置的slider样式,配合其遵循HTML5的data-XXX 自定义属性来实现无缝切换轮播图片。商品列表页采用了响应式布局,在不同的分辨率下将会有不同的呈现效果,以保证视图的完整。
商品详情界面
商品详情页面实现了秒杀倒计时的功能,其主要的实现原理是:通过获取当前时间的时间戳,与结束时间的时间戳求差值,获取毫秒差值,再通过一系列的时间换算计算剩余的天数、小时数、分钟数和秒数。由于本次项目为静态前端演示项目,结束时间是在JS部分随机生成的。而DOM的操作是通过jQuery实现的,通过setInterval函数来绑定一个计时器,动态地更新时间到页面中。
注册界面
注册界面使用了正则表达式来验证表单,使用ES6的语法将正则表达式存储在对象中,通过遍历DOM元素的方式来验证输入值是否正确。当验证不正确将无法注册成功,如验证正确,在点击注册按钮后将会返回到主页。
购物车界面
购物车界面将动态计算勾选的商品的价格及数量,算出小计和最终的价格,并实时的更新显示。广泛的使用jQuery遍历和操作DOM。