前端页面实现动态进度条基于Springboot/ javascript/ jsp

周大便

于 2020-02-29 11:48:32 发布

阅读量1.3k

点赞数

本文链接：https://blog.youkuaiyun.com/m0_37827405/article/details/104571363

版权

该博客介绍了如何使用SpringBoot、JavaScript和HTML来实现前端页面的动态进度条效果。首先在HTML中引入Bootstrap框架，然后创建进度条标签，通过JavaScript的AJAX每隔1秒向后端SpringBoot应用请求进度信息，并据此更新进度条的宽度。后端代码基于SpringBoot框架处理进度数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1) 首先在html页面中需要引入Bootstrap框架:在html最顶端复制下面代码

<!-- 引入BootStrap 框架-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

(2) 然后在html中加入进度条标签:由两层div组成，里层div的width决定进度条的进度

<!-- 进度条标签-->
<td>
<div id="prog_out" class="progress progress-striped active" >
    <div id="bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax