Titan笔记

  • 首页
  • Java
  • 数据结构
  • Web
  • C语言
  • Python
  • 杂谈
  • 逸笔挥墨
Titan笔记
分享学习、研究与开发过程中的点滴记忆
  1. 首页
  2. Web
  3. Web前端
  4. 正文

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

2020年6月14日 354点热度 2人点赞 0条评论

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

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

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: Titan商店Web项目 Web静态项目
最后更新:2020年6月14日

Titan

兴趣广泛而无一精擅
想到什么,我总是渴望以代码的方式去呈现
永远年轻,永远热泪盈眶
Stay Hungry, Stay Foolish

点赞
< 上一篇

文章评论

取消回复

Titan

兴趣广泛而无一精擅
想到什么,我总是渴望以代码的方式去呈现
永远年轻,永远热泪盈眶
Stay Hungry, Stay Foolish

逸笔挥墨 - Titan的文学天地
文章分类
  • C语言 (4)
  • Hadoop (1)
  • Hive (3)
  • Java (19)
  • JavaWeb (4)
  • Linux运维之道 (1)
  • Mybatis学习笔记 (3)
  • Python (3)
  • SpringCloud (4)
  • Web (5)
  • Web前端 (4)
  • Web后端 (5)
  • 数据库 (1)
  • 数据结构 (10)
  • 杂谈 (3)
  • 诗词歌赋 (1)
  • 随摘 (2)
最新 热点 随机
最新 热点 随机
Spring Cloud 微服务学习笔记 - 负载均衡服务调用 Spring Cloud 微服务学习笔记 - Eureka 服务注册与发现 Spring Cloud 微服务学习笔记 - IDEA工程搭建 关于我和Titan笔记 Spring Cloud 微服务学习笔记 - 开篇 TitanEMS - Titan企业员工管理系统 - JavaWeb期末实践项目
Spring Cloud 微服务学习笔记 - 开篇TitanEMS - Titan企业员工管理系统 - JavaWeb期末实践项目2021年1月随摘2021年1月诗摘关于我和Titan笔记《梦之浮桥》中的几句
[数据结构] 两个有序线性表的合并 [Java] 在Java中优雅地进行文件IO操作 [Python]随机生成大量的虚拟信息测试数据(姓名,手机号,ID,家庭住址等) [数据结构]链式存储: 多项式求和 [杂谈] 什么是递归函数? [数据结构] 二叉搜索树的CURD(增删改查)操作
标签聚合
Java 二叉树 数据结构 Mybatis学习笔记 链式存储 Apache-Hive JavaWeb Python
友情链接
  • Mttblog

COPYRIGHT © 2016 - 2021 Titan笔记. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

豫ICP备20001822号-1

豫公网安备 41010502004418号