实际项目中li和里边的数值是动态生成的，需要控制它的宽度和颜色，效果如图： 如果能实现颜色按数值规律变化就好了，目前颜色是固定到数组中的。 实例代码如下： <br> li{<br> padding-left: 20px;<br> list-style: none;<br> }<br> li>div{<br> height: 20px;<br> background-color: #038faa;<br> border-top-right-radius: 10px;<br> border-bottom-right-radius: 10px;<br> display: inline-block;<br> position: relative;<br> }<br> li>div>span{<br> display: inline-block;<br> position: absolute;<br> right: -22px;<br> }<br> 56 18 16 13 11 9 9 8 7 7 <br> $(function(){<br> var hotMaxNum = $("div:first").find("span").html();<br> $("div").each(function() {<br> var hotNum = $(this).find("span").html();<br> $(this).width(hotNum/hotMaxNum*350);<br> }); } );<br> $(function(){<br> var colorValue = new Array("#ffbbff", "#ffd39b", "#c6e2ff", "#9f79ee", "#9bcd9b","#ff8c00", "#87ceff","#3addfc","#cd69c9","#00eeee");<br> var tempValue = $("span").eq(0).html();<br> var y = 0 ;<br> $("span").each(function(){<br> var hotNumMax = $(this).html();<br> if(hotNumMax*1<tempValue){<br> tempValue = hotNumMax *1;<br> y++;<br> }<br> $(this).parent().css( {"Background-color":colorValue[y],"color":colorValue[y]} );<br> }); <br> });<br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
