[JavaScript知识库]web前端必学功法之一：五星好评

web前端必学功法之一：五星好评

案例效果：

    <!--
         思路分析：
                 1.设置鼠标样式，当鼠标放到星星上时，修改鼠标的样式
                 2.定义元素：通过表格的td元素来存放星星
                 3.绑定事件：绑定每一个星星的鼠标悬停事件
                 4.判断悬停位置：鼠标所在位置的左侧(包含当前位置)，设置为选中，右侧设置为不选中
        实现步骤：
                1.定义tab标签与对应的tr,td元素，用来设置星星的位置
                2.得到所有的td元素
                3.遍历td元素
                4.设置每一个td的鼠标悬停事件
                5.得到当前鼠标所在td的位置
                7.设置当前鼠标位置左侧的td值为黑色星星，右侧值为空白星星

    -->
    <table align="center"> 
           <tr>

              <td id="1">?</td>
              <td id="2">?</td>
              <td id="3">?</td>
              <td id="4">?</td>
              <td id="5">?</td>
           </tr>
    </table>

    <script>

           //得到所有的td元素
           var tds = document.getElementsByTagName("td");
           //遍历td对象
           for( var i =0;i<tds.length;i++){
               //设置鼠标样式
                    tds[i].style.cursor = "pointer";
                //给每个td绑定鼠标悬停事件
                    tds[i].onmouseover = function(){
                           //得到当前鼠标悬停的位置(td的id属性值)
                           var index= this.id;

                           //将当前位置左侧的星星变黑
                           for(var i =0;i<index;i++){
                                  tds[i].innerHTML ="★";
                           }
                           //将当前位置右侧的星星变黑
                           for(var j=tds.length;j>index;j--){
                                  tds[i].innerHTML ="?";
                           }
                    }
           }
    </script>