boostrap 进度条的使用

需求:1. 当前温度显示绿色 ,温度数值居中显示
2.当前温度大于设定温度显示橙色 ,温度数值居中显示
效果图展示

  <div  class="progress" >                             
	  <div class="progress-bar" [style.background-color]="progress.temp1>100 ? '#ff8c00' : '#25cd6b'"  role="progressbar" aria-valuenow="37"
	   aria-valuemin="0" aria-valuemax="37" [ngStyle]="{'width':progress.temp1+'%'}">
	   //[ngStyle]、 [style.background-color]、[style.margin-left]  使用的是Angular框架组件 如果你使用的不是Angular 可以灵活替换其它框架组件
	    <div  [style.margin-left]="progress.temp1>100 ? 0 : progress.temp1/10+'%'" >  {{selectedSetting.cntemp}}</div>
	   </div>
 </div> 
//定义一个变量progress.temp1赋值温度计算 的百分比
 this.progress.temp1 = this.tempPercent(this.selectedSetting.cntemp,this.meTemp );
   //计算温度百分比方法体  val当前温度值   total 设定温度值
  tempPercent(val,total){
  //计算val是total的百分比多少 
    let c = Math.round(val / total * 10000) / 100;
    return  c>100?101:c
  }
  .progress{
    background-color:#253139;
    height:20px;
    line-height:20px;
    border-radius: 10px;
    border: 0 !important;
    margin-bottom:5px;
    width:250px
  }
  .progress-bar{
    background-color: #25cd6b;/* 设置默认背景绿色*/
    height:20px;
    line-height:20px;
    border-radius: 10px;
    color:#fff;
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值