超簡單的可同時多項選擇的JS5星評分(fēn)代碼

發布時間：2018年09月06日浏覽次數：527 次

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>五星評分(fēn)</title>
<script language="javascript">
//obj爲指定星星區域的DIV對象，v_id爲選定星星值後輸出到的ID
function Select_Star( obj, v_id ){
var star = obj.getElementsByTagName('img');
var num = 0; ; //初始化已選定星星值的變量，默認爲0
      if( !isNaN(document.getElementById(v_id).value) ) num = document.getElementById(v_id).value; //獲取外(wài)部存儲的、已選定的星級數

      var star_off = "star.png"; //未選定的單個星星圖片
      var star_on = "star_full.png"; //已選定的單個星星圖片

for(var i = 0, len = star.length; i < len; i++){
star[i].index = i;
star[i].onmouseover = function(){
clear();
for(var j = 0; j < this.index + 1; j++){
star[j].src = star_on;
}
}
star[i].onmouseout = function(){
for(var j = 0; j < this.index + 1; j++){
star[j].src = star_off;
}
current(num);
}
star[i].onclick = function(){
num = this.index + 1;
document.getElementById(v_id).value = num;
current(num);
}
}
//清除所有
function clear(){
for(var i = 0, len = star.length; i < len; i++){
star[i].src = star_off;
}
}
//顯示當前第幾顆星
function current(num){
for(var i = 0; i < num; i++){
star[i].src = star_on;
}
}
};
</script>
</head>
<body>
      <div onmouseover=" Select_Star( this, 'star_num1' )">
            <img src="star.png" title="1分(fēn)" />
            <img src="star.png" title="2分(fēn)" />
            <img src="star.png" title="3分(fēn)" />
            <img src="star.png" title="4分(fēn)" />
            <img src="star.png" title="5分(fēn)" />
            <input id="star_num1" name="star_num1" type="text" value="0" size="1">
      </div>
      <div onmouseover=" Select_Star( this, 'star_num2' )">
            <img src="star.png" title="1分(fēn)" />
            <img src="star.png" title="2分(fēn)" />
            <img src="star.png" title="3分(fēn)" />
            <img src="star.png" title="4分(fēn)" />
            <img src="star.png" title="5分(fēn)" />
            <input id="star_num2" name="star_num2" type="text" value="0" size="1">
      </div>
      <div onmouseover=" Select_Star( this, 'star_num3' )">
            <img src="star.png" title="1分(fēn)" />
            <img src="star.png" title="2分(fēn)" />
            <img src="star.png" title="3分(fēn)" />
            <img src="star.png" title="4分(fēn)" />
            <img src="star.png" title="5分(fēn)" />
            <input id="star_num3" name="star_num3" type="text" value="0" size="1">
      </div>
</body>
</html>