@TOC

ssm653基于Javaweb的网上花店系统的设计与实现+jsp

研究背景

自计算机发展以来给人们的生活带来了改变。第一代计算机为1946年美国设计，最开始用于复杂的科学计算，占地面积、开机时间要求都非常高，经过数十几的改变计算机技术才发展到今天。现如今已是电子时代、数据时代，所有的生活都离不开计算机和网络。工作中有各类办公软件、APP，娱乐中有各类游戏软件、视频软件等都为生活带来了便捷，特别是我国的手机支付功能更是领先世界。科技推动了时代的发展。现在人们购物已从传统的实体购物转换到线上购物。线上购物拥有更大的优点，商品种类全、价格优惠、售后有保障。由于传统实体购物需要亲力亲为，商品单一，价格不透明已渐渐在线上购物的打压下难以发展。

现在，网络覆盖范围扩大，价格便宜，各大商户都开放的有无线网络。手机也得到了普及，计算机技术也深入到手机中。普通生活、娱乐等都可以在线上解决。线上已成为趋势，大部分的行业都可以在线上开通业务，通过线上为人们解决问题，改变面对面方式，提高工作效率以及减少时间浪费。

1.2课题现状与实现意义

现在网上购物平台使用率高的有淘宝、京东、唯品会以及刚时兴出来的网红直播带货。对于商家来言，想要突破发展就需要加入电商平台，但现在的加入费用、运营费用、竞争力都非常高造成效果不好，甚至亏本的情况。淘宝、京东、唯品会这类平台都属于三方平台，商家遵守平台规定进行商品的销售、管理、展示，竞争力可想而知。网络直播带货需要的费用更高，对商家来言可谓雪上加霜。对于鲜花这种需要时效性的商品，更需要严格的管理。

本系统采用商家对用户的模式，商家利用本平台可以管理鲜花、订单等。本系统可以帮助商家工作管理，实现鲜花的无地域、无时间销售。购买用户可以随时浏览、查询鲜花，可以了解鲜花的详情以及鲜花的其它用户的评价内容。本系统可以帮助用户更快的选择鲜花和跟踪订单，帮助商家增加销售途径，减少经营费用。本基于Javaweb的网上花店系统实现数据的自动化，减少商家的工作内容并实现数据的清晰化。

1.3课题内容

本基于Javaweb的网上花店系统使用角色可以分为游客、注册用户、管理员。游客可以浏览鲜花信息、公告信息信息、鲜花评价信息等，游客通过注册成为注册用户后可以购买鲜花和管理购物车、订单、个人信息、在线评价鲜花等，而且还额外的设置了一个论坛功能，大家可以在一起进行交流讨论，管理员负责本系统的管理，可以发布鲜花、管理鲜花、审核注册用户信息以及查看鲜花的评价、用户的留言建议，发布公告信息和进行鲜花进货。

1.4论文结构安排

本论文的结构安排为三部分，分别为：

（1）第一部分，

摘要，本部分为简单的阐述，使读者可以对本论文有大致的了解；

外文翻译，采用英语对摘要进行翻译；

目录，本部分可以使读者对本论文有详细的了解。

（2）第二部分为正文部分，

绪论，本章从课题开发的来源、现状来进行介绍，总结出本系统开发的意义以及内容等；

系统分析，本章包括语言、技术等的介绍以及系统的需求分析、可行性分析、流程分析等；

系统设计，本章包括系统的功能结构图、数据库设计等；

系统实现，本章采用系统运行截图加文字进行本系统的详细介绍；

系统测试，本章采用测试的方法进行主要核心功能的测试介绍；

（3）第三部分为总结、致谢、参考文献。

第2章　系统使用相关技术

2.1 Java语言介绍

Java语言是一种分布式的简单的 开发语言，有很好的 特征，在安全方面、性能方面等。非常适合在Internet环境中使用，也是目前企业级运用中最常用的一个编程语言，具有很大的影响力。主要是通过面向对象的形式进行开发，这样的话，就更能满足人们的需求。在编程开发使用中，主要通过封装的方式，通过类来实现，具有很好的可编辑行和操作性，这就是面向对象语言的最大特性，还可以在同一个类中把共同特性的类封装起来，形成一个抽象类，抽象类形容的不是一个对象，而是一个实体，这样就使用过程中就可以进行实例化，达到更好的效果。类之间还可以进行继承，比如一个类可以把另个类的特征进行继承，这样就可以重复使用，所以说这种继承性的类实际上还是同一个类体，这样就可以达到最大的效果。通过java开发的代码还有很好的扩展性，可以通过不同的类达到的不同的效果，更好的提高使用效率，而且在后期维护方面非常的方便，开发的代码更加实用，更加简洁。

2. 2 Mysql数据库介绍

Mysql数据库是Oracle公司推出的一个数据库管理软件，有很好的性能设计，可以充分发挥和利用互联网的优势，而且在数据库管理方面非常的方便，支持图形化管理，非常适合新手的使用，可以直接在本地进行数据管理和配置，而且有很强大的数据处理能力，还有很好的安全性。在数据存储的过程中可以支持多处理器的存储结构，可以自动生产和处理sql语句，有很强大的数据读取和复制存储功能，最最重要的是一个开放式的数据软件，可以为开放人员提供一个很好的数据库管理平台。

2. 3 Tomcat服务器介绍

Tomcat服务器是一个小型的轻量级服务器，非常适合一些小型的系统和本地的服务器使用，特别适合一些新手开发者使用。Tomcat服务器主要是当成java程序的服务器使用，Tomcat服务器相当于就是Apache的一个扩展应用，区别就是他可以独立运行，当客户端上配置好Tomcat服务器以后，就可以直接通过服务器对HTML页面完成数据访问和响应。非常受程序员的喜欢，因为占用的运行空间非常的小时，不影响服务器性能，而且扩展性很好，支持很多开发过程中常用的功能，可以根据开发者的需求进行不断的改进和完善，所以说Tomcat服务器是目前使用非常广泛的一个服务器。

第3章 系统分析

3.1系统可行性分析

系统是否可行决定了系统开发的成功性。想要系统的设计工作不会白费就需要经过详细的系统可行性分析。根据充分调查和参考相关论文发现，系统的可行性分析一般包括系统的技术可行性分析、系统的经济可行性分析、系统的操作可行性分析三种。

3.1.1系统经济可行性分析

本系统是Web型的网站，采用的Java语言开发的，开发周期比较短，而且技术成熟，所以在开发过程中没有过高的投入要求，有很好的经济可行性。

3.1.2系统技术可行性分析

本系统采用的技术有Vue网页技术、Mysql数据库、SSM模式、Java语言等。

（1）通过Vue进行前台的页面开发，具有很好的稳定性，而且可以直接在线升级维护，可以更方便的实现数据管理，通过Vue的最大特征就是系统提前已经自动完成了很大不重要的简单工作，可以自动生成很多常规代码，这样减少很大的工作量。而且Vue技术非常成熟，可以参考的案例也非常多。

（2）数据库采用Mysql数据库，也是非常适合学生用的一款小型数据库，使用起来非常的简单，而且数据处理效率高。

（3）采用SSM模式的网站已经是目前的开发主流，也是未来的发展方向。

（4）采用Java语言进行后台代码的开发，是面向对象的开发语言，可以直接查看和调用已用的案例，可以直接调用XML服务，而且兼容性非常的强，不管是哪个平台，都可以直接调用，而且是通用的，可以提高开发者的工作效率，而且有很好的灵活性，使用起来非常的方便。

所以通过以上几点的分析，开发人员只要能熟练的操作以上的技术就行，具有开发技术可行性。

3.1.3系统操作可行性分析

　因为本系统是采用SSM的架构模式进行开发的，所以只有安装的有浏览器和数据库服务器就可以进行系统的访问的使用。而且非常的简单易操作，普通用户只需要有最简单的互联网操作经验就行。

3.2系统需求分析

现在网上购物系统的技术发展已经非常成熟，各大电商平台的销售额也非常可观，特别是在一些重要的节日里一天的销售额都会达到几十亿。网上购物系统可以方便用户选择到更适合自己的商品，并且售后服务非常完善。目前，网上购物系统都涉及到鲜花，但没有专一的针对鲜花的购物网。现在实体商店里也会采用线上、线下相结合的方式进行商品的销售，由用户自主购物，管理人员在线发货、上新等，非常适合现代生活。线上鲜花销售系统是时代的趋势，其需求性不言而喻。

3.2.1传统销售系统优缺点分析

在最早出现的销售系统中主要使用人为工作人员，这类销售系统主要是采用C/s模式，这种模式可以保证数据的安全和存储性，数据库采用的也都是复杂、高性能的数据库，这类销售系统需要使用人员经过定期的培训才可以使用。随着网络的快速发展，这类销售系统的缺点也逐渐暴露出来，由于采用C/s模式就必须要求固定的客户端，这就需要足够严格的客户端条件，一旦客户端出现问题，系统里的数据都会出现问题，稳定性差，而且C/s模式的系统最大的问题是不能多次修改，如果系统经过了多次的补充、修改就会造成运行出错，为系统的使用造成不便。传统的销售系统通常采用的是脚本语言，脚本语言不够成熟，更容易出错，造成使用人员的损失。

3.2.2本基于Javaweb的网上花店系统分析

通过对传统销售系统的分析发现主要问题在于系统的模式架构上和数据库上。想要数据更为稳定就需要更稳定的数据库，好的数据库可以保证系统拥有更大的容错率和移植性，也可以在多种数据库中进行相互结合以此来保证系统里数据的安全。同时还需要注意系统的延续性，时代不断的发展，就会要求系统的服务更加的完善。想要使系统的生命周期更长就需要更为成熟的开发语言、技术、环境等。

本基于Javaweb的网上花店系统采用的模式架构为B/s，B/s框架可以脱离固定的客户端，把系统部署到浏览器上供用户使用，还可以把功能进行模块划分使数据库和操作界面分开，这样可以实现当任何一方出现问题时，另一方不受影响。数据库采用Mysql，Mysql数据库可以单独运行，当用户在进行操作后可自动保存操作后的数据，改变需要去数据库里修改数据的问题。开发语言采用Java，Java语言为动态语言，使用时间长久，已发展的非常成熟。本系统的其它技术包括Idea运行软件，Vue网页技术，Html技术等都是经过时间考验的。

3.3系统功能分析

本人参考大量的网上购物软件以及充分调查消费者和商家的需求，设计出的本基于Javaweb的网上花店系统使用角色为游客、注册用户、管理员。框架界面分为前台、用户操作界面、管理员操作界面。用户的功能设计为：

1. 搜索功能，用户可以直接通过搜索功能，搜索自己想要的商品，可以进行快速的查找；
2. 公告信息功能，用户可以通过此功能查看管理员发布的一些系统公告，活动信息等；
3. 鲜花信息功能，本界面里展示了上架的鲜花详情，游客可以详细了解，注册用户在登录后可以进行购买；
4. 论坛功能，用户可以一起进行讨论交流；
5. 购物车功能，遇见自己想要的商品，可以加入购物车，也可以去购物车进行查看和购买，
6. 评价功能，用户收货以后可以对商品进行评价。

　后台管理员的功能设计为：

1. 公告信息管理功能，可以发布、编辑、删除一些公告信息；
2. 鲜花信息管理功能，对鲜花进行上架、下架、编辑等，还可以查看鲜花的评价、留言，然后对用户的订单进行发货等；
3. 论坛管理，可以对论坛功能进行管理操作；
4. 基础数据管理，可以设置系统公告管理，会员等级管理，鲜花类型管理；
5. 轮播图信息，可以设置前台首页的图片信息，可以修改切换，
6. 用户管理，可以管理维护注册的用户信息。

3.4系统性能分析

在系统分析中还有重要的一点就是系统的性能分析，除却系统的功能分析其它问题都可以划分到系统的性能分析。主要包括系统数据问题、系统运行问题、系统安全问题。

1. 系统数据问题表现在数据库的设计中，因为购物网的核心在于鲜花的购买，在购买操作中会引起多种数据的变化。想要数据在变化时不会出错就需要在数据库设计时注意不同数据字段、类型等的主外键联系；
2. 系统的运行问题表现在多平台、多人在运行系统时的稳定性。系统的运行速度也需要注意，运行的卡顿、读码速度等都需要经过多次测试；
3. 系统的安全性问题表现在不同角色的使用权限，游客做为权限最少的角色不能越权，管理员做为权限最多的角色要可以管理其它几种角色。

3.5用例图

根据功能分析得出，本系统的主要使用角色为管理员和注册用户。注册用户可以查看公告信息、可以论坛交流、浏览鲜花、购买鲜花、商品评价以及管理购物车、订单等。管理员可以管理系统信息、论坛管理、注册用户、鲜花信息以及公告信息信息、订单信息、鲜花评价、分类信息等。用户用例图如下图3-1所示：

图3-1用户用例图

管理员用例图如下图3-2所示：

图3-2管理员用例图

3.6系统业务流程

业务流程可以按照用户使用本系统的步骤进行设计。本系统中注册用户的流程为查看公告信息、浏览鲜花、购买鲜花、加入购物车、管理订单、管理个人资料、对鲜花评价、在线留言等。管理员的流程为管理公告信息信息、用户的评价、用户的订单、用户的注册资讯、管理鲜花等。基于Javaweb的网上花店系统的业务流程如下图3-3所示：

图3-3基于Javaweb的网上花店系统业务流程图

（1）用户注册是游客成为注册用户的必经之路，在注册时需要输入信息、判断信息。用户注册的流程图如下图3-4所示：

图3-4用户注册的流程图

（2）用户评价时需要判断是否为登录状态，然后判断评价的内容是否合法，用户评价功能可以实现用户也商家之间的沟通。用户评价流程图如下图3-5所示：

图3-5用户评价流程图

（3）购买鲜花的过程需要多种数据的配合，购买鲜花的流程属于本系统的核心。首页确定登录，然后浏览鲜花，加购物车，购买，结算等。鲜花购买流程如下图3-6所示：

图3-6鲜花购买流程图

第4章　系统设计

4.1系统体系结构

系统的体系结构非常重要，往往决定了系统的质量和生命周期。针对不同的系统可以采用不同的系统体系结构。本系统为基于Javaweb的网上花店系统，属于开放式的平台，所以在体系结构中采用B/s。B/s结构抛弃了固定客户端要求，采用服务器、客户端的模式。用户操作界面在前台展示，管理员操作界面在后台展示。B/s结构基于互联网，需要网络的支持，由用户在浏览器上发布命令，服务器负责向数据库传送命令，最后再由服务器把反馈的结果传回浏览器给用户进行呈现。

4.2系统功能结构

系统的功能结构是系统实现的框架，本系统的主要结构为管理员和用户。管理员的功能为个人中心管理、公告信息管理、分类管理、鲜花管理、注册用户管理、订单管理、评价管理等。用户的功能为在线注册与登录、公告信息浏览、鲜花信息浏览、个人资料信息管理、我的购物车管理、我的订单管理、在线交流和鲜花评价。本基于Javaweb的网上花店系统用户功能结构图如下图4-1所示：

图4-1基于Javaweb的网上花店系统用户功能结构图

基于Javaweb的网上花店系统的用户功能结构图如下图4-2所示：

图4-2基于Javaweb的网上花店系统管理员功能结构图

4.2.1 数据处理与安全设计

数据的安全设计主要考虑的系统的程序和数据库的处理和安全性，数据处理的时候都设置了相应的限制，必须输入合法的数据才能进行正常操作，否则系统会有相应的提示。根据不同的安全指标采用的是不同的安全方法，系统需要有明确的权限划分，有用户权限和管理员权限，用户只能操作用户的部分，不能登录管理员权限，其次是用户之间不能相互冲突，用户名不能有重复的，其次用户登录账号密码的时候，密码需要加密不可见，必须通过正规的登录途径才能登录系统，而且用户退出系统要删除相关的标记。

4.2.2特色功能设计

本系统的特色功能是在管理员操作界面加入了可视化统计，在鲜花管理功能和销售界面都加入图形统计，方便管理员更直观的了解和分析商品信息和销售信息。

4.3数据库设计

数据库设计在系统设计中占有重大比例，数据库的设计包括ER图设计和数据库表设计。

4.3.1ER图设计

根据本系统的特点，本系统设计的主要实体包括管理员信息、用户信息、鲜花信息、订单信息、公告信息信息和评价信息。

1. 管理员ER图包括的属性有管理员的编号、用户名和密码。管理员ER图如下图4-2所示：

图4-2管理员实体的ER图

1. 鲜花信息包含的属性为鲜花的详细描述，有鲜花编号、鲜花名称等。鲜花信息ER图如下图4-3所示：

图4-3鲜花信息实体ER图

（3）注册用户信息的属性包括用户的个人资料，有姓名、性别、电话等。注册用户信息实体ER图如下图4-4所示：

图4-4注册用户实体ER图

（4）订单实体的属性有订单时间、订单编号、订单人等。订单实体ER图如下图4-5所示：

图4-5订单信息实体ER图

（5）评价信息实体的属性有评价人、评价内容、评价时间等。评价信息实体的ER图如下图4-6所示：

图4-6评价信息实体ER图

（6）公告信息信息实体的属性有标题、内容、发布时间。公告信息实体ER图如下图4-7所示：

图4-7公告信息实体ER图

（7）本基于Javaweb的网上花店系统的整体实体关系图如下图4-8所示：

图4-8系统关系ER图

4.3.2数据库表设计

根据数据ER图的设计，本系统的数据库表有管理员信息表、用户信息表、鲜花信息表、评价信息表等。本系统的数据库表如下图4-1至4-15所示：

表4.1：address

|| | :- | 表4.2：cart

|| | :- | 表4.3：config

|| | :- | 表4.4：dictionary

表4.5：forum

|| | :- |

表4.6：gonggao

|| | :- | 表4.7：token

|| | :- | 表4.8：users

|| | :- | 表4.9：xianhua

|| | :- | 表4.10：xianhua_collection

|| | :- | 表4.11：xianhua_commentback

|| | :- |

表4.12：xianhua_liuyan

表4.13：xianhua_order

|| | :- |

表4.14：yonghu

第5章 系统实现

5.1用户注册功能的界面实现

用户注册功能设计的目的是实现用户的操作。系统中想要进行操作就需要先成为注册用户，游客只能浏览信息。用户注册功能界面中设置了用户的资料字段，本界面的数据和用户信息表相连，当游客在本界面里注册成功，所填写的资料会保存到用户信息表中。用户注册功能的运行界面如下图5-1所示：

图5-1用户注册功能的运行界面

5.2登录功能的界面实现

用户注册成功后，需要登录。登录界面设计的目的是保证当前的使用角色等级。管理员同样需要登录后才可以进行操作。用户登录和管理员登录的界面分为两个，在登录时只需要填写用户账号和密码就可以实现。用户登录的时候需要输入注册时候的账号密码，然后系统会自动的跟数据库存储好的数据进行信息比对，如果比对成功就可以成功登录，如果比对错误，那么会跳出来相应的错误提示，用户登录的运行界面如下图5-2所示：

图5-2用户登录的运行界面

管理员登录的界面中包含的元素有系统题目、输入框、登录按钮。管理员登录的条件是需要账号、密码、身份。管理员登录的运行界面如下图5-3所示：

图5-3管理员登录运行界面

5.3管理员功能的设计实现

5.3.1注册用户管理功能的实现界面

用户注册后的资料管理员可以在注册用户管理功能里看到，本功能设计的目的是审核注册用户的资料，当发现不当的使用用户可以删除其账号。当删除注册用户信息后相对应的用户信息表里的信息也会随着删除掉。注册用户管理功能的运行界面如下图5-4所示：

图5-4注册用户管理功能的运行界面

5.3.2 会员等级管理功能的实现界面

本功能可以实现对会员的等级进行管理，不同的会员等级可以享受不同的优惠折扣。会员等级管理功能的运行界面如下图5-5所示：

图5-5会员等级管理功能的运行界面

5.3.3公告信息管理功能的实现界面

当管理员添加、编辑公告信息后，数据库表中的供应商信息表也会发生改变。供公告信息管理功能的运行界面如下图5-6所示：

图5-6公告信息管理功能的运行界面

5.3.4 鲜花分类管理功能的实现界面

本功能可以管理鲜花的分类，实现鲜花的条理管理。分类管理功能的运行界面如下图5-7所示：

图5-7分类管理运行界面

5.3.5 订单管理功能的实现界面

用户下订单后，管理员都可以在本功能里收到。当审核订单无误后可以进行下一步操作。然后可以安排发货，输入订单号。订单管理功能的运行界面如下图5-8所示：

图5-8订单管理功能的运行界面

5.3.6 鲜花信息管理功能的界面实现

鲜花信息由管理员进行更新，在发布鲜花信息时可以显示发布时间。鲜花信息管理的运行界面如下图5-9所示：

图5-19鲜花信息管理功能的运行界面

5.3.7论坛管理功能的界面实现

管理员可以查看论坛信息，然后可以进行回复。实现界面如下图5-10所示：

图5-10论坛管理功能的实现界面

5.4用户角色功能的界面实现

5.4.1鲜花浏览功能的界面实现

　用户的功能主要展示在前台，在前台可以浏览所有分类的鲜花。鲜花详情中主要展示鲜花的图片、价格、标题。鲜花信息浏览功能的运行界面如下图5-11所示：

图5-11浏览鲜花运行界面

5.4.2提交订单功能的实现界面

选择鲜花点击购买可以跳转到提交订单界面，在本界面里需要填写收货地址。提交订单功能的运行界面如下图5-12所示：

图5-12用户提交订单的运行界面

5.4.3订单管理功能的实现界面

用户在提交订单后可以在个人后台里看到订单后的订单信息，可以进行一定的修改。订单管理功能的运行界面如下图5-13所示：

图5-13订单管理功能的运行界面

5.4.4购物车管理功能的界面实现

用户可以在购物车里选择购买我清空。购物车管理功能的实现界面如下图5-14所示：

图5-14购物车管理功能的实现界面

5.4.5收藏管理功能的界面实现

用户可以把商品加入收藏，然后可以查看自己收藏的商品信息，如下图5-15所示：

图5-15收藏管理功能的实现界面

第6章 系统测试

系统测试的方

CartServiceImpl.java

package com.service.impl;

import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.CartDao;
import com.entity.CartEntity;
import com.service.CartService;
import com.entity.view.CartView;

/**
 * 购物车 服务实现类
 */
@Service("cartService")
@Transactional
public class CartServiceImpl extends ServiceImpl<CartDao, CartEntity> implements CartService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        if(params != null && (params.get("limit") == null || params.get("page") == null)){
            params.put("page","1");
            params.put("limit","10");
        }
        Page<CartView> page =new Query<CartView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

XianhuaCollectionServiceImpl.java

package com.service.impl;

import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.XianhuaCollectionDao;
import com.entity.XianhuaCollectionEntity;
import com.service.XianhuaCollectionService;
import com.entity.view.XianhuaCollectionView;

/**
 * 鲜花收藏 服务实现类
 */
@Service("xianhuaCollectionService")
@Transactional
public class XianhuaCollectionServiceImpl extends ServiceImpl<XianhuaCollectionDao, XianhuaCollectionEntity> implements XianhuaCollectionService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        if(params != null && (params.get("limit") == null || params.get("page") == null)){
            params.put("page","1");
            params.put("limit","10");
        }
        Page<XianhuaCollectionView> page =new Query<XianhuaCollectionView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

progress-app.js

$(function() {
    function randomPercentage() {
      return Math.floor(Math.random() * 100);
    }

    function randomInterval() {
      var min = Math.floor(Math.random() * 30);
      var max = min + (Math.floor(Math.random() * 40) + 70);
      return [min, max];
    }

    function randomStep () {
      return Math.floor(Math.random() * 10) + 5;
    }

    // setup
    var $basic = $('#basic');
    var interval = randomInterval();
    var basicBar = $basic.find('.number-pb').NumberProgressBar({
      style: 'basic',
      min: interval[0],
      max: interval[1]
    })
    $basic.find('.title span').text('[Min: ' + interval[0] + ', Max: ' + interval[1] + ']');

    var percentageBar = $('#percentage .number-pb').NumberProgressBar({
      style: 'percentage'
    })

    var $step = $('#step');
    var maxStep = randomStep()
    var stepBar = $('#step .number-pb').NumberProgressBar({
      style: 'step',
      max: maxStep
    })
    $step.find('.title span').text('[Max step: ' + maxStep + ']');

    // loop
    var basicLoop = function() {
      basicBar.reach(undefined, {
        complete: percentageLoop
      });
    }

    var percentageLoop = function() {
      percentageBar.reach(undefined, {
        complete: stepLoop
      });
    }

    var stepLoop = function() {
      stepBar.reach(undefined, {
        complete: basicLoop
      });
    }

    // start
    basicLoop();
  });

声明

本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。