jquery 进度条

最新推荐文章于 2022-11-26 15:18:48 发布

blatar

最新推荐文章于 2022-11-26 15:18:48 发布

阅读量1k

点赞数 2

分类专栏： JavaScript 文章标签： jquery function div input

本文链接：https://blog.csdn.net/blatar/article/details/7954838

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果图

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>bar</title>
<script type="text/javascript" src="jquery-1.8.0.min.js" ></script>
<style type="text/css">
#time_back{width:300px;height:20px;border:1px solid #246;background:#CCC}
#time_bar{width:0;height:20px;background:#470;color:#FFF;text-align:right;}
#target_back{width:300px;height:20px;border:1px solid #246;background:#CCC}
#target_bar{width:0;height:20px;background:#470;color:#FFF;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 
 $("#input_time").change(function(){
  var rate = $(this).attr("value");
  changebar("#time_bar",rate,"red");
 });
 
 $("#input_target").change(function(){
  var rate = $(this).attr("value");
  changebar("#target_bar",rate,"orange");
 });
 
 /**
 * 更新进度条
 * @ param obj 进度条id
 * @ param rate 进度，0-100间的整数
 * @ param deadColor 当进度超过一定值（默认80）的颜色
 */
 function changebar(obj,rate,deadColor){
  if(undefined!=deadColor&&rate>80){
   $(obj).css({"background":deadColor})
  }
  rate = rate%100 + "%";
  $(obj).animate({width:rate},1000);
  $(obj).html(rate);
 }
});
</script>
<body>
日期：<div id="time_back" ><div id="time_bar" ></div></div>
进度：<div id="target_back" ><div id="target_bar" ></div></div>
<input type="text" id="input_time" />
<input type="text" id="input_target" />
</body>
</html>

blatar

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery 进度条

效果图 bar#time_back{width:300px;height:20px;border:1px solid #246;background:#CCC}#time_bar{width:0;height:20px;background:#470;color:#FFF;text-align:right;}#target_back{width:30
复制链接

扫一扫