javascript实现评分控件
在电子商务网站中，会出现对于商品评分和服务态度的打分问题，其具体是用"★"和"☆"来区别的。其中主要的技术是使用Dom实现，下面请看代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>无标题页</title> 5 <script type="text/javascript"> 6 function indexOf(arr,e){ 7 for(var i=0;i<arr.length;i++){ 8 if(arr[i]==e){ 9 return i; 10 } 11 } 12 } 13 function rating(){ 14 var tables=document.getElementById("rating"); 15 var tds=tables.getElementsByTagName("td"); 16 for(var i=0;i<tds.length;i++){ 17 var td=tds[i]; 18 td.style.cursor="pointer"; 19 td.onmouseover=function(){ 20 var tables=document.getElementById("rating"); 21 var tds=tables.getElementsByTagName("td"); 22 var index=indexOf(tds,this); 23 if(index>=0){ 24 for(var i=0;i<=index;i++){ 25 tds[i].innerHTML="★"; 26 } 27 for(var i=index+1;i<tds.length;i++){ 28 tds[i].innerHTML="☆"; 29 } 30 } 31 }; 32 } 33 } 34 </script> 35 </head> 36 <body onload="rating()"> 37 <table id="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table> 38 39 </body> 40 </html>
实现此效果的具体步骤如下：
1.在body中建立一个table，table是一个一行五列的表，其id为"rating"。
2.建立一个名为rating的函数，此函数的主要功能是实现评分功能。首先取得table，然后取得此table的lie（td）。取得td后使用for语句对所有的td进行遍历并为每一个td添加onmouseover事件（td.onmouseover=function(){}），这里使用的是匿名函数。
3.在onmouseover事件中，要考虑两个问题。第一，如何判断鼠标定位哪一个td上；第二，如何将定位的td以及以前的td中的”☆“变为”★“，将之后的”★“变为”☆“。判断鼠标的定位在其他的语言中有一个indexOf()可以实现，但javascript中没有这个函数，此时可以手写了一个indexof()函数。此函数中两个参数arr为一个数组，e为定元素，所以indexOf函数的含义为，当数组中第i个元素等于定位元素时，返回数组的key值。在代码中的var index=indexOf(tds,this);中的index即时当前的定位元素的key值。所以第二个问题也迎刃而解，只需要使用for语句对于tds数组中的元素的innerHTML根据要求进行赋值即可。
注意：在做此练习是五角星可以使用搜狗或者QQ拼音输入wjx即可选择。
