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 = "notif ="
CSS ：
.starts, .starts ul {float: left;}. Mulai {padding-left: 16px; padding-top: 7px;}. Mulai ul li {lebar: 32px; tinggi: 31px; float: latar belakang: #ddd; padding-right: 3px; span {display: inline; float: left; padding-left: 10px; Height: 31px; line-height: 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 = ''; }} untuk (var i = 0; i <n.length; i ++) {n [i] .onClick = function () {var q = this.getAttribute ("rel"); clearall (); input.value = q; untuk (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 (); untuk (var i = 0; i <q; i ++) {n [i] .className = 'on'; }} n [i] .onmouseout = function () {clearAll (); untuk (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