保存进度条

最新推荐文章于 2023-07-31 10:33:24 发布
最新推荐文章于 2023-07-31 10:33:24 发布
阅读量235 收藏
点赞数
分类专栏： java-web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36357608/article/details/80963090
版权

jsp:

 <script language="javascript"> 
  function checkchar(){
  if(document.Form2.stationRun.value.length>2500){
 
    alert("站点运行情况字数不能超过2500字");
    return;
  }
  if(document.Form2.devRun.value.length>2500){
 
    alert("设备运行情况字数不能超过2500字");
    return;
  }
  document.Form2.action="system/elecCommonMsgAction_save.do";
  document.Form2.submit();
  loading();
  }
  function addEnter(element){
    document.getElementById(element).value = document.getElementById(element).value+"<br>";
   
  }
  function checkTextAreaLen(){
  var stationRun = new Bs_LimitedTextarea('stationRun', 2500); 
        stationRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
        stationRun.draw();
 
        var devRun = new Bs_LimitedTextarea('devRun', 2500); 
        devRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
        devRun.draw();
  }
  window.οnlοad=function(){
//checkTextAreaLen();
  }
/**添加百分比的进度条显示*/
var xmlHttp;
//创建ajax引擎
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
      }
    }
  }
}

function loading() {
createXMLHttpRequest();
clearLoad();
var url = "elecCommonMsgAction_progressBar.do";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = createCallback;
xmlHttp.send(null);
}

function createCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//每隔1秒钟执行一次percentServer()方法，直到当前访问结束
setTimeout("percentServer()", 1000);
}
}
}

function percentServer() {
createXMLHttpRequest();
var url = "elecCommonMsgAction_progressBar.do";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updateCallback;
xmlHttp.send(null);
}

function updateCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//获取XML数据中的percent存放的百分比的值
//此时xmlHttp.responseXML=<response><percent>15</percent></response>
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var tdOne = document.getElementById("tdOne");
var progressPersent = document.getElementById("progressPersent");
//改变蓝色区域的宽度
tdOne.width = percent_complete + "%";
//将百分比的数值显示到页面上
progressPersent.innerHTML = percent_complete + "%";
//如果计算获取的百分比的数值没有达到100，则继续调用方法，直到操作结束为止
if (percent_complete < 100) {
setTimeout("percentServer()", 1000);
}
}
}
} 
function clearLoad() {
document.getElementById("load").style.display="";
document.getElementById("opperate1").style.display="none";//将现有的div隐藏
       document.getElementById("opperate2").style.display="none";//将现有的div隐藏
}

  </script>

<body>

<table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
 <tr>
   <td><br><br>
   <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
       <tr bgcolor="#F7F7F6">
         <td width="20%" height="100" valign="middle">
   <table align='center' width='500'>
     <tr>
      <td colspan='2' align='center' id="progressPersent"><font size="2">
       正在进行保存，用时较长，请稍后...
       </font>
      </td>
     </tr>
     <tr>
       <td id='tdOne' height='25' width=1 bgcolor="blue">&nbsp;</td>
       <td id='tdTwo' height='25' width=500 bgColor='#999999'>&nbsp;</td>
     </tr>
   </table>
         </td>
       </tr>
   </table>

</body>

controller:

@RequestMapper("save.do")

public String save(){

//elecCommonMsgService.saveElecCommonMsg(elecCommonMsg);
//测试百分比的进度条
//模拟：循环遍历150条数据，观察百分比的变化情况
for(int i=1;i<=150;i++){
elecCommonMsgService.saveElecCommonMsg(elecCommonMsg);
request.getSession().setAttribute("percent", (double)i/150*100);//存放计算的百分比
}
//线程结束时，清空当前session
request.getSession().removeAttribute("percent");
return "save";
}
       
        @RequestMapper("elecCommonMsgAction_save.do")
public String progressBar() throws Exception{
//从session中获取操作方法中计算的百分比
Double percent = (Double) request.getSession().getAttribute("percent");
String res = "";
//此时说明操作的业务方法仍然继续在执行
if(percent!=null){
//计算的小数，四舍五入取整
int percentInt = (int) Math.rint(percent); 
res = "<percent>" + percentInt + "</percent>";
}
//此时说明操作的业务方法已经执行完毕，session中的值已经被清空
else{
//存放百分比
res = "<percent>" + 100 + "</percent>";
}
//定义ajax的返回结果是XML的形式
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
//存放结果数据，例如：<response><percent>88</percent></response>
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
return null;
}

zengwenhe1987
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】实现进度条
Ai-Fairy的博客
08-11 560
用原生js实现进度条效果
进度条
qq_41832319的博客
05-23 223
&lt;ProgressBar android:id="@+id/progressbar" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_centerInParent="true" android:layout_width="match_parent" android:...
进度条显示导出文件进度
07-24
文件导出时进度条显示其导出的进度。利用委托和事件，使窗体避免造成假死状态。是理解进度条比较好的案例
css 圆形扩散特效 水波
笔记库
10-16 2109
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
导出加载进度条
u013773114的博客
03-29 2121
//获取所有行数据 var rows = $("#dg").datagrid("getRows"); if (rows.length > 0) { //打开进度条 $.messager.progress({ title: '请稍等', msg: '正在导出...', text: '拼命加载中...',
excel导出百万数据与进度条展示
擎云科技的博客
06-21 1172
excel导出百万数据与进度条展示
易语言进度条制作步骤
08-26
最后，保存你的工作，然后点击运行按钮或按下F5键，你的易语言进度条程序就将开始执行。点击按钮，进度条将开始自动填充，当填满后，程序将执行特定的操作（在这里是加载新的窗口）。 这就是使用易语言制作简单...
自制下载进度条
03-30
这通常通过保存当前下载位置并在用户触发相应操作时恢复下载来实现。 总之，“自制下载进度条”是一个综合性的编程任务，涉及网络编程、多线程、UI交互、错误处理等多个方面。根据不同的开发语言和平台，实现方式...
MATLAB进度条的设置
01-18
通过设置回调函数，还可以在进度条达到特定阈值时触发其他操作，如保存中间结果或显示警告信息。 总的来说，MATLAB的进度条是进行长时间运算时提升用户体验的有效工具，正确设置和使用可以帮助开发者更好地监控和...
导出和打印Excel 太慢 请加进度条
08-08
导出和打印Excel 太慢 请加进度条
前端上传进度条
05-15
这需要服务端的支持，以及保存和恢复上传状态的机制。 9. **多文件上传**：如果需要上传多个文件，可以使用数组迭代或者Promise.all()来并发或顺序处理每个文件的上传，并为每个文件显示独立的进度条。 10. **预览...
Vista风格硬盘进度条XP版
05-15
这意味着用户可以在较旧的操作系统上享受到更新版本的视觉体验，尤其是在文件操作过程中，如复制、移动或保存文件时，能看到更加美观且直观的进度反馈。 【标签解析】 "风格硬盘进度条" 这个标签直接指向了主题的...
导出文件下载进度条简单实现
zwrlj527的专栏
07-31 1032
简单的实现进度条，用在数据需要长时间一条条生成时，看进度条特别明显轮询其实也可以用websocket替代（这样可以离开页面做其他操作，当然这样也是可以的，就是轮询要做到全局请求了，业务模块多的下载的时候前后端都压力变大）这里其实还用到了easypoi的模板导出，大家可以自己看看api就写到这里，希望能帮到大家，uping！
导出怎样增加进度条，保证进度条和导出的进行完成同步（ajax导出增加进度条）
笔下无书生的博客
10-24 1357
近期在工作中遇到一个问题，导出增加进度条，可以说是一个原本非常简单的事情，但要求必须进度条消失文件下载的弹框就要出现，也就是说完全同步，试了好多种方法才发现用下面的方式才行。 干货分析 js代码` 导出的请求方法 ExportDownloadTimer 是前后端监听是否导出完成的对象 var params = {};//参数需要往后台传递的参数信息 $.ajax({ type: "POST",
手把手教你实现超大数据量带进度条导入导出功能（二导出篇）
techFarmer的博客
11-12 2130
概述 对于超大数据量的导出是一个长耗时的操作。在没有进度条情况下，当用户点击导出后，页面长时间得不到反馈，导致用户不清楚是导出出现问题，还是导出正在进行处理还未结束。所以，为超大数据量的导出添加进度条功能显得尤为必要。 下面以导出10000000手机号数据为例，开发带进度条的导出功能。 需求分析 进度条分析 文件的导出有两个阶段，一是查询数据库生成数据文件；二是数据文件下载。对于数据文件的下载各大浏览器都可以很好的显示下载进度，不需要添加进度条。所以，进度条展示的是一阶段查询数据库生成数据文件的进度，对
01-导出文件时设置进度条
Strawberry_ahh的博客
11-17 3754
导出Excel文件时，设置进度条来显示导出进度
前端map传给后端接收
qq_36357608的博客
01-10 7373
前端let map = new Map(); map.set(1, 1); map.set(2, 2); map.set(3, 3); //map转obj let obj= Object.create(null); for (let[k,v] of map) { obj[k] = v; } $.ajax({ url:"", type:"POST", dataType:'json', contentType : 'application/json;charset=ut.
urldownloadtofile进度条
最新发布
01-27
它通常用于编程中获取远程文件，并将其保存到本地计算机的特定位置。 在实际使用urldownloadtofile函数下载文件时，我们可以通过添加进度条来提供更好的用户体验。实现进度条的关键是了解文件下载的过程以及如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值