Titan商店 - 又一个Web静态项目

本次期末大作业实验项目的总体介绍：

基于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。