html : :
<viv> <ul id = "pingstar"> <li rel = "1"> </li> <li rel = "2"> </li> <li rel = "3"> </li> <li rel = "4"
CSS :
.starts ،. ul {float: left ؛}. يبدأ {padding-left: 16px ؛ padding-top: 7px ؛}. span {display: inline ؛ float: left ؛ padding-left: 10px ؛ leight: 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 = '' ؛ }} لـ (var i = 0 ؛ i <n.length ؛ i ++) {n [i] .onclick = function () {var q = this.getAttribute ("rel") ؛ clearall () ؛ input.value = q ؛ لـ (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 () ؛ لـ (var i = 0 ؛ i <q ؛ i ++) {n [i] .className = 'on' ؛ }} n [i] .onmouseout = function () {clearall () ؛ لـ (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