一个不错的js星级评分代码，可以评多个指标。

相关文章推荐：用css制作星级投票评分功能

效果图：

<script language="javascript"> /* Class that defines a standard ratings component. */ // Messages for display above the individual ratings units. The length of the // array also defines how many units to include in the component. yg_Ratings.Msgs = new Array ( "差", "及格", "一般", "比较好", "棒极了" ); yg_Ratings.Labels = new Array ( "1 Star", "2 Stars", "3 Stars", "4 Stars", "5 Stars" ); // Path for all images. //var path = "http://us.i1.yimg.com/us.yimg.com/i/us/ls/gr/"; //var path = "http://us.i1.yimg.com/us.yimg.com/i/us/sh/karma/yri_"; var path = "http://www.dphost.cn/images/yri_"; yg_Ratings.starbar = "star_"; // Image for set units. yg_Ratings.UnitY = "yellow.gif"; // Image for set units <= the mouse over point. yg_Ratings.UnitYMouseOver = "yellow.gif"; // Image for set units > the mouse over point. yg_Ratings.UnitYMouseLess = "grey.gif"; // Image for unset units. yg_Ratings.UnitN = "white.gif"; // Image for unset units <= the mouse over point. yg_Ratings.UnitNMouseOver = "hover.gif"; yg_Ratings.DefaultMsg = " "; function yg_Ratings(id, button, inputname, defaultval,type) { // The id parameter is the name (a string) of the variable to which the // instance is assigned. (The variable is sent along to event handlers, // so it must be in the global scope.) var i, t; var attributes; var h1, h2; var d = document; var style; this.starbar = type + "_"; this.rating = 0; this.showbutton = button; if (defaultval < 1 || defaultval > 5) { defaultval = 0; } this.rating = defaultval; attributes = 'class="ygrtngs" id="' + id + '" style="' + style + '"'; h1 = 'onMouseOut="return yg_Ratings_mouseOut(' + id + ');"'; d.write('<span ' + attributes + ' ' + h1 + '>'); if (defaultval > 0 && type == "star") { d.write('<div class="msg" id="'+id+'_msg">'+yg_Ratings.Msgs[defaultval-1]+'</div>'); } else { d.write('<div class="msg" id="'+id+'_msg" style=\"display:none\">'+yg_Ratings.DefaultMsg+'</div>'); } if (this.showbutton) { d.write('<span><strong>Rate it:</strong></span>'); } for (i = 1; i <= yg_Ratings.Msgs.length; i++) { h1 = 'onMouseOver="return yg_Ratings_mouseOver(' + id + ', ' + i + ');"'; h2 = 'onClick="return yg_Ratings_click(' + id + ', ' + i + ');"'; d.write('<span class="unit "' + h1 + ' ' + h2 + '>'); if (i <= defaultval) { d.write('<img src="' + path + this.starbar + yg_Ratings.UnitY + '" />'); } else { d.write('<img src="' + path + this.starbar + yg_Ratings.UnitN + '" />'); } d.write('</span>'); } if(defaultval){ d.write('<input type="hidden" name="'+inputname+'" id="input_'+id+'" value="' + defaultval + '" />'); } else { d.write('<input type="hidden" name="'+inputname+'" id="input_'+id+'" />'); } this.input = document.getElementById('input_'+id); d.write('</span>'); this.parent = document.getElementById(id); this.images = this.parent.getElementsByTagName("img"); this.msg = document.getElementById(id + '_msg'); this.id = id; var children = this.msg.childNodes; var node; for (var i = 0; i < children.length; i++) { node = children[i]; if (node.nodeType == 3) { this.DefaultMsg = node.nodeValue; } } } function yg_Ratings_set(n, oflag) { if (arguments.length < 2) oflag = true; this.rating = n; this.DefaultMsg = yg_Ratings.Msgs[n-1]; // if (this.showbutton) { this.showBtn("btnSave"); // } this.update(n, oflag); } function yls_Ratings_showSubmit(sBtn) { var saveButton = document.getElementById(sBtn); if(saveButton != null) { saveButton.style.display="block"; } } function yg_Ratings_setMsg(m) { var children = this.msg.childNodes; var node; for (var i = 0; i < children.length; i++) { node = children[i]; if (node.nodeType == 3) { // Using 0xA0 prevents the browser from collapsing empty messages. node.nodeValue = m; } } } function yg_Ratings_get() { return this.rating; } function yg_Ratings_update(n, oflag) { // The oflag parameter is true when the mouse is outside of the ratings // component. The n parameter is the if (this.starbar == 'star_') { if (oflag) { this.setMsg(this.DefaultMsg); } else { this.setMsg(yg_Ratings.Msgs[n - 1]); } } if (n == this.rating) { this.input.setAttribute("value", n); } for (i = 1; i <= yg_Ratings.Msgs.length; i++) { if (oflag) { if (i <= this.rating) this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitY; else this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitN; } else { if (i <= n) { if (i <= this.rating) this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitYMouseOver; else this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitNMouseOver; } else { if (i <= this.rating) this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitYMouseLess; else this.images[i - 1].src = path + this.starbar + yg_Ratings.UnitN; } } } return true; } function yg_Ratings_click(obj, n) { obj.set(n, false); return true; } function yg_Ratings_mouseOver(obj, n) { obj.update(n, false); return true; } function yg_Ratings_mouseOut(obj) { obj.update(0, true); return true; } yg_Ratings.prototype.set = yg_Ratings_set; yg_Ratings.prototype.setMsg = yg_Ratings_setMsg; yg_Ratings.prototype.get = yg_Ratings_get; yg_Ratings.prototype.update = yg_Ratings_update; yg_Ratings.prototype.showBtn = yls_Ratings_showSubmit; </script> 访问速度： <script> if (document.getElementById) { // Support for Class A. _ratings_proj1_ = new yg_Ratings("_ratings_proj1_", false, "proj1", 0, "star"); } else { // Support for poor DOM (low grade). document.write('<small><input type=radio name="proj1" value="1">'); document.write('<input type=radio name="proj1" value="2">'); document.write('<input type=radio name="proj1" value="3">'); document.write('<input type=radio name="proj1" value="4">'); document.write('<input type=radio name="proj1" value="5"></small>'); } </script> <noscript><small> <input type=radio name="proj1" value="1"> <input type=radio name="proj1" value="2"> <input type=radio name="proj1" value="3"> <input type=radio name="proj1" value="4"> <input type=radio name="proj1" value="5"></small></noscript> 性价比： <script> if (document.getElementById) { // Support for Class A. _ratings_proj2_ = new yg_Ratings("_ratings_proj2_", false, "proj2", 0, "star"); } else { // Support for poor DOM (low grade). document.write('<small><input type=radio name="proj2" value="1">'); document.write('<input type=radio name="proj2" value="2">'); document.write('<input type=radio name="proj2" value="3">'); document.write('<input type=radio name="proj2" value="4">'); document.write('<input type=radio name="proj2" value="5"></small>'); } </script> <noscript><small> <input type=radio name="proj2" value="1"> <input type=radio name="proj2" value="2"> <input type=radio name="proj2" value="3"> <input type=radio name="proj2" value="4"> <input type=radio name="proj2" value="5"></small></noscript> </td></tr><tr><td> 服务质量：</td><td> <script> if (document.getElementById) { // Support for Class A. _ratings_proj3_ = new yg_Ratings("_ratings_proj3_", false, "proj3", 0, "star"); } else { // Support for poor DOM (low grade). document.write('<small><input type=radio name="proj3" value="1">'); document.write('<input type=radio name="proj3" value="2">'); document.write('<input type=radio name="proj3" value="3">'); document.write('<input type=radio name="proj3" value="4">'); document.write('<input type=radio name="proj3" value="5"></small>'); } </script> <noscript><small> <input type=radio name="proj3" value="1"> <input type=radio name="proj3" value="2"> <input type=radio name="proj3" value="3"> <input type=radio name="proj3" value="4"> <input type=radio name="proj3" value="5"></small></noscript> </td><td> 安全性：</td><td> <script> if (document.getElementById) { // Support for Class A. _ratings_proj4_ = new yg_Ratings("_ratings_proj4_", false, "proj4", 0, "star"); } else { // Support for poor DOM (low grade). document.write('<small><input type=radio name="proj4" value="1">'); document.write('<input type=radio name="proj4" value="2">'); document.write('<input type=radio name="proj4" value="3">'); document.write('<input type=radio name="proj4" value="4">'); document.write('<input type=radio name="proj4" value="5"></small>'); } </script> <noscript><small> <input type=radio name="proj4" value="1"> <input type=radio name="proj4" value="2"> <input type=radio name="proj4" value="3"> <input type=radio name="proj4" value="4"> <input type=radio name="proj4" value="5"></small></noscript> [提示：你可先修改部分代码，再按运行]