专栏首页前端之攻略bootstrap 进度条模拟温度计 原

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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 蒙版css技巧 原

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

    tianyawhl
  • 垂直方向margin重叠原因与解决方法 原

    可以看出由于margin-top:20px;margin-bottom:20px,应该显示40px但是只显示20px,是什么原因呢?这就涉及到BFC

    tianyawhl
  • 单列div不包含里面div margin的解决方法

    若一个大的div ,里面有2个小div,第一个小div有margin-top:20px; margin-bottom:20px;,第二个小divmargin-b...

    tianyawhl
  • CSS布局之道——内凹圆角

    但是细想之后发现两者皆不可用,border-radius处理的话是凸角,舍弃;定位需要独立出来两个模块,复杂度高了,舍弃。可是舍弃后,需要怎么做呢?切背景图吗?...

    流眸
  • 水平居中和垂直居中

    本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

    echobingo
  • 垂直方向margin重叠原因与解决方法 原

    可以看出由于margin-top:20px;margin-bottom:20px,应该显示40px但是只显示20px,是什么原因呢?这就涉及到BFC

    tianyawhl
  • jQueryMobile快速入门

      jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动...

    笔阁
  • (2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

    BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。

    无道
  • vue弹窗屏蔽滑动的两种解决方案

      在开发过程中,我们经常会遇到要加弹窗的需求,而如果当前页的展示数据一屏展示不完,则在打开弹窗后,有滑动操作时,页面也会随之滑动。那么如何处理这一问题呢?

    流眸
  • 数据猿专访 | 天云大数据CEO雷涛:人工智能已进入产业化爆发阶段,再不醒醒就会错过所有机会

    <数据猿导读> 随着互联网和大数据技术的高速发展,面向特定领域的人工智能技术已取得突破性进展;谷歌、微软、百度等巨头积极的在人工智能领域多点布局、抢占产业机遇;...

    数据猿

扫码关注云+社区

领取腾讯云代金券