jquery-ui 進度條功能示例【測試可用】

2019-11-19 11:08:22

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jquery-ui 進度條功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html><head><meta charset="utf8" /><title>www.survivalescaperooms.com progressbar</title><style type="text/css">  #divprogressbar{  width:300px;  height:30px;  }  .progress-label{  float:left;  margin-left:40%;  margin-top:3px;  }</style><link rel="stylesheet"  rel="external nofollow"  media="screen"/><script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script></head><body><div id="divprogressbar"><div class="progress-label">loading...</div></div><script type="text/javascript">  $(function(){   // var val=0;    $('#divprogressbar').progressbar({value:0});    $('#divprogressbar').progressbar({      value:0,      change:function(){        $(".progress-label").text($("#divprogressbar").progressbar("value")+"%");      },      complete:function(){        $(".progress-label").text("Complete!");      }    });    function progress(){    var val= $('#divprogressbar').progressbar("value") || 0;    $('#divprogressbar').progressbar("option","value",val+1);    if(val<99)    {    setTimeout(progress,100);    }    }    setTimeout(progress,1000);  } );</script></body></html>

運行效果：