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"
CSS.
.Starts, .Starts ul {float: izquierda;}. inicio {relleno-izquierda: 16px; padding-top: 7px;}. inicio ul li {ancho: 32px; altura: 31px; float: izquierda; fondo: #ddd; padding-right: 3px;}. Comienza ul.on {fondo: rojo;}. span {display: inline; float: izquierda; padding-izquierda: 10px; altura: 31px; línea de línea: 31px;}最后 JS 调用如下:
Window.Onload = function () {var s = document.getElementById ("pingstar"), m = document.getElementById ('dir'), n = s.getElementsByTagName ("li"), input = document.getElementById ('startp'); // 保存所选值 clearAll = functer () {for (var i = 0; i <n.length; i ++) {n [i] .classname = ''; }} for (var i = 0; i <n.length; i ++) {n [i] .Onclick = function () {var q = this.getAttribute ("rel"); ClearAll (); input.Value = Q; for (var i = 0; i <q; i ++) {n [i] .classname = 'on'; } m.innerhtml = this.getAttribute ("título"); } n [i] .onmouseover = function () {var q = this.getAttribute ("rel"); ClearAll (); for (var i = 0; i <q; i ++) {n [i] .classname = 'on'; }} n [i] .onmouseout = function () {clearAll (); for (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