需求里要求实现一个根据数值的大小展现不同进度条长度的功能,实现效果如下:
核心思想其实很简单,就是通过控制width属性动态变化它的长度,并且写好它的固定宽度,以及背景颜色
剩下的问题就是如何计算不同数值的长度了,由于数据是后端进行排序过的,所以可以默认数组第一个的数值是最大的,并且将这个最大的数值默认为100%的长度,而剩下的数值则与这个最大值比较,从而算出长度,代码如下:
其中,max就是数组第一个值最大的数,随后遍历整个数组,对每一项的数值执行computeWidth函数,并传入最大值max和当前数值,computeWidth函数返回值为计算得出的百分比数,该函数代码如下:
将当前数值除以最大值并乘以100,然后利用toFixed函数取2位小数点,得出的就是相应的百分比了。
这样一个简单的排行榜就写好啦~
第一次写简书记录开发中遇到的有意思的东西,如有不足,请多指正~