实现像百度文库那样的星星评分效果----javascript实现

html文件中主要代码：

<script src="../indexjs/search.js" type="text/javascript"></script>

 

 <span  onmouseout ="out()"> 

<img src="images/grayFiveStart.gif" id="giveScore1" onclick="setscore(1)" onmousemove ="over(1)" style="cursor:pointer ; width:16px; height:16px;" alt="讨厌" /> 

<img src="images/grayFiveStart.gif" id="giveScore2" onclick="setscore(2)" onmousemove ="over(2)" style="cursor:pointer; width:16px; height:16px;" alt="不喜欢" /> 

<img src="images/grayFiveStart.gif" id="giveScore3" onclick="setscore(3)" onmousemove ="over(3)" style="cursor:pointer ; width:16px; height:16px;" alt="一般" /> 

<img src="images/grayFiveStart.gif" id="giveScore4" onclick="setscore(4)" onmousemove ="over(4)" style="cursor:pointer; width:16px; height:16px;"  alt="喜欢" /> 

<img src="images/grayFiveStart.gif" id="giveScore5" onclick="setscore(5)" onmousemove ="over(5)" style="cursor:pointer ; width:16px; height:16px;" alt="非常喜欢" /> 

<span class="b2c_star_note" id="commentScore"> </span>                                      

</span>

<input type="hidden" id="bthidden" value="0" />

 

search.js文件中代码：

function setscore(score)

{

 var txtSearchFood = document.getElementById("bthidden" );

     txtSearchFood.value=score;

}

function out()

{

var txtSearchFood = document.getElementById("bthidden" );

 

if(txtSearchFood.value==0)

{

for(i=1;i<=5;i++)

{

  var txtSearchFood = document.getElementById("giveScore" + i.toString());

        txtSearchFood.src = "images/grayFiveStart.gif";

}

}

}

function over(score) {

var txtSearchFood = document.getElementById("bthidden" );

 

if(txtSearchFood.value>0)

{

return false;

}

    for (i = 1; i <= score; i++) {

        var txtSearchFood = document.getElementById("giveScore" + i.toString());

        txtSearchFood.src = "images/fiveStart.jpg";

    }

    for (i = 5; i > score; i--) {

        var txtSearchFood = document.getElementById("giveScore" + i.toString());

        txtSearchFood.src = "images/grayFiveStart.gif";

    }

    var tscore = document.getElementById("commentScore");

    // scoretext;

    switch (score) {

        case 1: scoretext = "很讨厌"; break;

        case 2: scoretext = "不喜欢"; break;

        case 3: scoretext = "一般"; break;

        case 4: scoretext = "喜欢"; break;

        case 5: scoretext = "非常喜欢"; break;

 

    } tscore.innerHTML = scoretext;

}