JavaScript制作淘宝星级评分效果的思路

小编也是刚开始学JavaScript，觉得淘宝评星效果很棒，于是产生了自己写一个的想法，先给大家分享一下实现效果：

现附上自己写的源代码

rush:xhtml;"> <Meta charset="UTF-8">

请您对我们作出评价:

☆ ☆ ☆ ☆ ☆

一开始的时候用了两个for循环就是这样的:

rush:js;"> for(var i=0;i<=n;i++) { document.getElementById("fiveStar").innerText="★"; } for( var j=4;j>n;j--) { document.getElementById("fiveStar").innerText="☆"; }

大神们估计已经看出来了,在for循环之后HTML里的span已经失去了作用,也就是说它只能评价一次..... 于是顺着这个思路想到了用数组解决这个问题,就是让评星效果里的每一颗星储存到数组里,写出了上述的代码,可楼主还犯了一个小错误,着实困恼了许久.... array[0]=document.getElementById("onestar").innerText; 通过这样定义的数组....结果可想而知,后面的代码根本无法改变评星,后来意识到,这样的定义直接将ID为onestar的元素的内容赋值给了数组,也就是说数组成了一个指向数组的指针....自然无法改变对应元素的值.后来总算明白了.... 之后又加了一些CSS效果 成品是这样的:

rush:xhtml;">

rating">

rating-level" id="stars2">

以上就是JavaScript制作淘宝星级评分效果的思路，语言很直白，易理解，希望对大家的学习有所帮助，和小编一起去探索javascript更多的神奇之处，共同进步。

原文地址：https://www.jb51.cc/js/51596.html