Js实现网站常用的评分效果!

View Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
     < title > 网站评分特效 </ title >
     < style  type ="text/css" >
        *
         {
            font-size :  50px ;
         }
     </ style >
     < script  language ="javascript"  type ="text/javascript" >
         function  indexOf(arr, element) {             // 在Js中自己写indexOf方法；
             for  ( var  i  =   0 ; i  <  arr.length; i ++ ) {
                 if  (arr[i]  ==  element) {
                     return  i;
                }
            }
             return   - 1 ;
        }

         function  CommentLevel() {
             var  CommentLevel  =  document.getElementById( " CommentLevel " );
             var  tds  =  document.getElementsByTagName( " td " );  // 获取CommentLevel表格下的td，不处理其他表格中的td;
             for  ( var  i  =   0 ; i  <  tds.length; i ++ ) {
                 var  td  =  tds[i];     // 获取每个td;
                td.onmouseover  =  TdOnClick;
                td.style.cursor  =   " pointer " ;
            }
        }

         function  TdOnClick() {
             var  CommentLevel  =  document.getElementById( " CommentLevel " );
             var  tds  =  document.getElementsByTagName( " td " );  // 获取CommentLevel表格下的td，不处理其他表格中的td;
             var  index  =  indexOf(tds,  this );  // 获取当前点击位置；

             for  ( var  i  =   0 ; i  <=  index; i ++ ) {   // 点击之前的都变红；
                tds[i].innerText = " ★ " ;
            }

             for  ( var  i  =  index  +   1 ; i  <  tds.length; i ++ ) {   // 点击之后的是白色；
                tds[i].innerText = " ☆ " ;
            }

        }
     </ script >
</ head >
< body  onload ="CommentLevel()" >
     < table  id ="CommentLevel" >
         < tr >
             < td >
                ☆
             </ td >
             < td >
                ☆
             </ td >
             < td >
                ☆
             </ td >
             < td >
                ☆
             </ td >
             < td >
                ☆
             </ td >
         </ tr >
     </ table >
</ body >
</ html >