html 如下 ：
<div> <ul id="pingStar"> <li rel="1"></li> <li rel="2"></li> <li rel="3"></li> <li rel="4"></li> <li rel="5"></li> <span id="dir"></span> </ul> <input type="hidden" value="" id="startP"></div>
CSS 样式 ：
.Starts, .Starts ul {float: links;}. Startet {padding-linft: 16px; padding-top: 7px;}. Startet UL li {width: 32px; Höhe: 31px; float: links; Hintergrund: #ddd; padding-right: 3px;}. span {display: inline; float: links; padding-links: 10px; Höhe: 31px; Linienhöhe: 31px;}最后 js 调用如下:
window.onload = function () {var s = document.getElementById ("pingstar"), m = document.getElementById ('dir'), n = S.GetElementsByTagName ("li"), input = document.getElementById ('startp'); // 保存所选值 clearAll = function () {for (var i = 0; i <n.Length; i ++) {n [i] .className = ''; }} für (var i = 0; i <n.Length; i ++) {n [i] .onclick = function () {var q = this.getAttribute ("rel"); clearall (); input.Value = q; für (var i = 0; i <q; i ++) {n [i] .className = 'on'; } M.InnerHtml = this.getAttribute ("title"); } n [i] .onmouseover = function () {var q = this.getAttribute ("rel"); clearall (); für (var i = 0; i <q; i ++) {n [i] .className = 'on'; }} n [i] .onmouseout = function () {clearAll (); für (var i = 0; i <input.Value; i ++) {n [i] .classname = 'on'; }}}}查看演示 http://demo.vevb.com/js/2014/jsxxdf/
如果有喜欢使用基于 jQuery 的星星打分效果 ， ： ： ： //www.vevb.com/jiaoben/195077.html