bootstrap 进度条模拟温度计原

最近需要做一个类似温度计的图表，网上找了好久，也没有找到合适的，现根据bootstrap的进度条来模拟温度计，主要实现根据不同区间的数据来显示不同的颜色，并自适应屏幕大小,在网上找到一个背景图，进度条

放在上面

上面为显示的效果

html 代码

<div class="col-lg-4"> <h3 class="jiankong-subtitle">温度</h3> <div class="wendudiv" style=""> <div class="wendu-progress" style=""> <div class="progress-title" style=""><span class="wendu-num">40</span>℃</div> <div class="progress" style="" > <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"> </div> </div> </div> </div> </div>
css 样式 .zzsc-content{height:350px;background:#fafafa;text-align:center;padding-top:20px;} .wendudiv{height:350px;width:100%;background:#fafafa;display:table;} .wendu-progress{padding-top:19px;height:76px;background:url(../../dist/img/temp.png) center center no-repeat;display:table-cell;vertical-align:middle;text-align:center;} .progress-title{float:left;margin-left:21.27%;margin-right:15px;} .progress{margin-left:31.9%;margin-right:6.76%;background:#fff;height:23px;} @media(max-width:1750px){ .wendu-progress{background:url(../../dist/img/temp.png) no-repeat center center /90%;} }

代码语言：javascript复制

<script>
   $(document).ready(function(){
   $('.wendu-num').each(function(i,n){
   if($(this).text()<30) {
			   $(this).parent().siblings().children(".progress-bar").addClass("progress-bar-info");
	} else if(30<=$(this).text() && $(this).text()<=50){
			   $(this).parent().siblings().children(".progress-bar").addClass("progress-bar-success");
	} else {
			   $(this).parent().siblings().children(".progress-bar").addClass("progress-bar-danger");
	}
   });
   window.onresize=function(){
       $(".wendudiv").height($(".wendudiv").width()*0.64);
   };
});
 </script>

(adsbygoogle = window.adsbygoogle || []).push({});

bootstrap

0 人点赞

bootstrap 进度条模拟温度计 原

bootstrap 进度条模拟温度计原