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> 

  
複製代碼