jq使用easyui的Progressbar进度条

今天也是爱大大的一天吖

已于 2022-10-28 18:21:22 修改

阅读量787

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： easyui 前端 jquery

于 2022-10-28 18:20:51 首次发布

本文链接：https://blog.csdn.net/qq_45560350/article/details/127576576

jQuery 专栏收录该内容

12 篇文章

订阅专栏

博客主要介绍了controlProgressBar方法的逻辑。当参数为“none”时，隐藏已存在的进度条；当参数为“block”且进度条dom存在时，改变其display属性使其显示；当参数为“block”但进度条不存在时，将dom元素添加进页面。

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

controlProgressBar方法逻辑：

第一个if判断：参数为"none"时进这儿，传"none"值表示进度条一定存在，这里是想让进度条隐藏

第二个if判断：参数为"block"+进度条dom存在时进这儿，表示想让进度条显示，只需要改变其display属性

第三个判断：参数为"block"+进度条不存在时进这儿，不存在进度条dom要将dom元素添加进页面

//控制进度条的显示与隐藏 传值"none"/"block"
function controlProgressBar(status){
  var ele = "progressOverlay";
  var dom =
    document.getElementById(ele) ||
    window.parent.document.getElementById(ele) ||
    window.parent.parent.document.getElementById(ele) ||
    window.top.document.getElementById(ele) ||
    $("iframe")
      .contents()
      .find("#" + ele)[0];
  if (status === "none") {
    $("#progressBar").progressbar("setValue",100)
    progressTimer && clearInterval(progressTimer)
    // 查询渲染完成 进度条隐藏
    setTimeout(()=>{
      dom.style.display = status;
    },200)
  }else if(dom){
    // 查询渲染开始 显示进度条 并从0开始
    dom.style.display = status;
    $("#progressBar").progressbar("setValue",0)
    // 获取进度条当前值
    let progressValue = $("#progressBar").progressbar("getValue");
    progressTimer && clearInterval(progressTimer)
    progressTimer = setInterval(()=>{
      if(progressValue < 90){
        progressValue += Math.floor(Math.random() * 10);
        progressValue = progressValue >= 100? 99:progressValue
        // 设置进度条当前值
        $("#progressBar").progressbar("setValue",progressValue)
      }else{
        clearInterval(progressTimer)
      }
    },200)
  }else{
    // 进度条没被渲染过
    var loadingHtml = `<div id="progressOverlay" class="progressOverlay pageOverlay">
                  <div class="progressOverlay-cont">
                      <div id="progressBar" class="easyui-progressbar" style="width:100%;height:30px"></div>
                      <div class="progressOverlay-title">正在加载...</div>
                      <div class="progressOverlay-map-bg"></div>
                  </div>
              </div>`;
    // before方法 在被选中元素之前加入
    $("#mapIframe").before(loadingHtml);
    // 动态添加easyui组件 需要刷新
    $.parser.parse($("#progressOverlay"));
    let progressValue = $("#progressBar").progressbar("getValue");
    progressTimer = setInterval(()=>{
      if(progressValue < 90){
        progressValue += Math.floor(Math.random() * 10);
        progressValue = progressValue >= 100? 99:progressValue
        $("#progressBar").progressbar("setValue",progressValue)
      }else{
        clearInterval(progressTimer)
      }
    },200)
  }
}