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>
CSS 样式：
.starts, .starts ul {float: ซ้าย;}. เริ่มต้น {padding-left: 16px; padding-top: 7px;}. เริ่มต้น ul li {ความกว้าง: 32px; ความสูง: 31px; ลอย: ซ้าย; พื้นหลัง: #ddd; Span {display: inline; float: ซ้าย; padding-left: 10px; ความสูง: 31px; line-height: 31px;}最后 JS 调用如下:
window.onload = function () {var s = document.getElementById ("pingstar"), m = document.getElementById ('dir'), n = s.getElementByTagname ("li"), input = document.getElementById ('startp'); // 保存所选值 clearall = function () {สำหรับ (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