boostrap 进度条的使用_bootstrap range拖动显示数值-优快云博客

本文链接：https://blog.youkuaiyun.com/chenThreeMetals/article/details/125560822

本文介绍了一种基于Angular框架的温度进度条实现方法，通过不同的颜色变化来展示当前温度是否超过预设值，并确保温度数值居中显示。此外，还提供了一个计算温度百分比的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：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;
  }