HTML5控件progress改变颜色

时间 2019-11-17

标签 html5 html 控件 progress 改变颜色栏目 HTML5 繁體版

原文原文链接

你说我一个搞安卓的怎么被老大派去写H5了呢，人的命运啊，真的是不可预料。蛤蛤。。。。全是泪javascript

项目中使用到H5中的progress来表示进度，要问我为嘛不自定义一个progress啊？很简单，由于我不会啊，蛤蛤。。。全是泪前端

都说前端是坑，我如今都看出来了，各类浏览器的兼容，什么鬼！一个控件的style在不一样的浏览器中还不同，尼玛就不能统一下么。java

要求很简单，当检测到传过来的数据小于某个阈值时，进度条变红色。百度了半天都没结果，最后仍是靠stackoverflow搞定的。Chrome和Safari是没问题的，Firefox的，没测不知道。代码以下：web

  
   
  <style media="screen"> 

  
   
   
   

  
   
  .pr { 

  
   
   
   

  
   
  width: 106px; 

  
   
   
   

  
   
  height: 6px; 

  
   
   
   

  
   
  background: #ededed; 

  
   
   
   

  
   
  } 

  
   
   
   

  
   
  progress::-webkit-progress-bar { 

  
   
   
   

  
   
  background: #ededed; 

  
   
   
   

  
   
  border-radius: 8px; 

  
   
   
   

  
   
  } 

  
   
   
   

  
   
  progress::-webkit-progress-value { 

  
   
   
   

  
   
  background: #06c5d8; 

  
   
   
   

  
   
  border-radius: 8px; 

  
   
   
   

  
   
  } 

  
   
   
   

  
   
  .pr.alert::-webkit-progress-value { 

  
   
   
   

  
   
  background: red; 

  
   
   
   

  
   
  } 

  
   
   
   

  
   
  </style> 
 
   
     <body> 
    
 
   
     <progress class="pr" value="15" max="100"></progress> 
    
 
   
     </body> 
    

  
   
   
   

  
   
  <script type="text/javascript"> 

  
   
   
   

  
   
  var value = 14; 

  
   
   
   

  
   
  if (value<15) { 

  
   
   
   

  
   
  $('.pr').addClass('alert'); 

  
   
   
   

  
   
  } 

  
   
   
   

  
   
  </script> 

  
复制代码