一、需求

如下图

重点是要实现进度条。

二、分析

一文中提到过html5新增了progress标签。但是肯定有兼容性问题。生成环境不适用，所以要模拟实现。

原理：动态设置<p>的子元素<span>的宽度值。

1、简单的雏形

假设只有一个进度条，如下，我们只需要知道p元素的宽度，span元素的百分比，相乘即得到span的宽度，浏览器加载时动态设置span的宽度即可实现进度条的效果。

2、投票进度条实现过程

第一步：结构如下

     
     
  
      
    
       
      
        
A：
      
        
      
        79（2%）    
       
  
  
      
    
       
      
        
B：
      
        
      
        1986（61%）    
       
  
  
      
    
       
      
        
C：
      
        
      
        1153（36%）    
       
  
  
      
    
       
      
        
D：
      
        
      
        415（13%）    
       
  
  
      
    
       
      
        
E：
      
        
      
        89（3%）    
       
  
     

给span增加一个width和背景色，就可以出现进度条的效果。这一步用js实现。

第二步、js设置span的宽度

效果：

 第三步，js设置span的背景色

 第二步中的背景色都是如下设置为一样。

$(spanArr[i]).css({'background-color':"#c2f263"});

 现在随机生成背景色，做一个彩色的进度条。

最终效果：

本文作者,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。