html给进度条旁边显示百分比,这种h5的百分比进度条如何实现

实践思路

两种解决方案，简单和繁琐。

一个背景图片，用定位来显示百分比。

左右写两个盒子。

代码思路

第一种：

给父级加个定位position: relative;

在加一个背景颜色。用css3-moz-linear-gradient

样例：background: -moz-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 50%, #ffffff 100%); /* FF3.6-15 */

给每个span都分别定位position: absolute;定位按照设计图走。

每个span都不要背景颜色。

另外我span的命名都是瞎起的，你运用到自己的项目中，要起含义一致的。

其他的，我觉得就是ajax请求，并把获得的数据覆盖上。

关于百分比的参数，你可以跟后台沟通，可以直接让他把对应的值告诉你，你在把获取的值，拼到样式里。这个就需要你跟后台人员对接了。

购买支持

60%

40%

购买支持

第二种：

给浮动的两个div分别写一种不同颜色的背景。其他的就没有什么区别了。

购买支持

60%

40%

购买支持