Titan笔记

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

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

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

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

基于HTML5 + Bootstrap4 + jQuery进行设计于开发,广泛使用响应式布局系统,确保在不同分辨率屏幕下的网页呈现。在JavaScript的开发过程中,广泛使用了ECMAScript6标准(即一些ES6的特性)。项目共分为四个模块界面:主页、购物车、注册页面与商品详情页面。

在线演示

具体的演示效果可以访问演示地址来查看

https://demo.titan6.cn/titanshop/

主页部分

主页部分主要实现了导航栏、主页Banner轮播图、商品列表页以及Footer。其中导航栏与Footer为了保持整个项目的设计一致性,在其他页面也同样引入。

主页Banner轮播图的实现,使用的是Bootstrap内置的slider样式,配合其遵循HTML5的data-XXX 自定义属性来实现无缝切换轮播图片。商品列表页采用了响应式布局,在不同的分辨率下将会有不同的呈现效果,以保证视图的完整。

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

商品详情界面

商品详情页面实现了秒杀倒计时的功能,其主要的实现原理是:通过获取当前时间的时间戳,与结束时间的时间戳求差值,获取毫秒差值,再通过一系列的时间换算计算剩余的天数、小时数、分钟数和秒数。由于本次项目为静态前端演示项目,结束时间是在JS部分随机生成的。而DOM的操作是通过jQuery实现的,通过setInterval函数来绑定一个计时器,动态地更新时间到页面中。

Titan商店 - 又一个Web静态项目插图1
Titan商店 - 又一个Web静态项目插图2

注册界面

注册界面使用了正则表达式来验证表单,使用ES6的语法将正则表达式存储在对象中,通过遍历DOM元素的方式来验证输入值是否正确。当验证不正确将无法注册成功,如验证正确,在点击注册按钮后将会返回到主页。

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

购物车界面

购物车界面将动态计算勾选的商品的价格及数量,算出小计和最终的价格,并实时的更新显示。广泛的使用jQuery遍历和操作DOM。

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

Titan

不为岁月流逝蹉跎,不为潮流的势头去附和

点赞
< 上一篇

文章评论

您需要 登录 之后才可以评论
最新 热点 随机
最新 热点 随机
Docker配置IPv6容器网络支持 什么是Elastic Stack,ELK的发展历程 K8s中Pod的基本概念 Pushkin AI - 基于OpenAI-ChatGPT / GPT3的问答机器人 云原生 - 浅谈容器基础与K8S架构设计 腾讯Serverless体验,使用TypeScript编写并部署云函数
Docker配置IPv6容器网络支持
Spring Cloud 微服务学习笔记 - 开篇 关于Hive使用的一些实例 提问的智慧 [数据结构]结构体练习之复数运算 [Java] 在Java中优雅地进行文件IO操作 Apache - Hive环境部署与快速入门
分类
  • Android
  • C语言
  • Elasticsearch
  • Hadoop
  • Hive
  • Java
  • JavaWeb
  • Kubernetes
  • Linux运维之道
  • Mybatis学习笔记
  • Python
  • SpringCloud
  • Web
  • Web前端
  • Web后端
  • 云原生
  • 并发编程
  • 开发工具
  • 数据库
  • 数据结构
  • 杂谈
  • 移动开发
  • 移动测试
  • 诗词歌赋
  • 软件测试
  • 逸笔挥墨
  • 随摘
标签聚合
二叉树 Python JavaWeb Java Mybatis学习笔记 Apache-Hive 数据结构 链式存储

COPYRIGHT © 2013-2021 Titan. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

豫ICP备20001822号-1

豫公网安备 41010502004418号