js星星评分效果

<div> <ul> <li title="特别差，给1分"></li> <li title="很差，给2分"></li> <li title="一般般，给3分"></li> <li title="很好，给4分"></li> <li title="非常好，给5分"></li> <span></span> </ul> <input type="hidden" value=""> </div>

css样式：

.starts,.starts ul{float:left;} .starts{padding-left:16px;padding-top:7px;} .starts ul li{width:32px;height:31px;float:left;background:#ddd;padding-right:3px;} .starts ul li.on{background:red;} .starts ul 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 = ''; } } 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("title"); } 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'; } } } }

查看演示

如果有喜欢使用基于jquery的星星打分效果，可以参考这个地址：https://www.jb51.net/jiaoben/195077.html

您可能感兴趣的文章: