超简单的可同时多项选择的JS5星评分代码

发布时间：2018年09月06日浏览次数：535 次

<!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>五星评分</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; //获取外部存储的、已选定的星级数

      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分" />
            <img src="star.png" title="2分" />
            <img src="star.png" title="3分" />
            <img src="star.png" title="4分" />
            <img src="star.png" title="5分" />
            <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分" />
            <img src="star.png" title="2分" />
            <img src="star.png" title="3分" />
            <img src="star.png" title="4分" />
            <img src="star.png" title="5分" />
            <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分" />
            <img src="star.png" title="2分" />
            <img src="star.png" title="3分" />
            <img src="star.png" title="4分" />
            <img src="star.png" title="5分" />
            <input id="star_num3" name="star_num3" type="text" value="0" size="1">
      </div>
</body>
</html>