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%;}    
} 

<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>