Js star rating _ javascript skills

Here, I would like to share with my friends the effect of using js to score stars in the mall. I hope to help you with the following html:

Css style:

.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;}

The js call is as follows:

Window. onload = function () {var s = document. getElementById ("pingStar"), m = document. getElementById ('dir'), n = s. getElementsByTagName ("li"), input = document. getElementById ('startp '); // Save the selected value 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 ';}}}}

View demo http://demo.jb51.net/js/2014/jsxxdf/

If you like to use jquery-based star scoring effect, you can refer to this address: http://www.jb51.net/jiaoben/195077.html