jquery 进度条

最新推荐文章于 2024-07-29 03:39:25 发布

chenbo19867758

最新推荐文章于 2024-07-29 03:39:25 发布

阅读量603

点赞数

分类专栏：工具类文章标签： jquery stylesheet function go class button

本文链接：https://blog.csdn.net/chenbo19867758/article/details/5738178

版权

工具类专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Progressbar - Animated</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
  .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
</style>
<script type="text/javascript">
var count = 1;
$(function() {
  $("#progressbar").progressbar({
   value: count
  });
  setTimeout(go,100);

});
function go(){
  count+=1;
  $('#progressbar').progressbar('option', 'value', count);
  if(count<100){
     setTimeout(go,50);
  }
}

function show(){
alert("Hello World");
}

</script>
</head>
<body>

</div>

<p>
This progressbar has an animated fill by setting the
<code>background-image</code>
on the
<code>.ui-progressbar-value</code>
element, using css.
</p>

</div>
<input type="button" value="go" οnclick="go()"/>
</body>
</html>