Js star rating, js star rating

Js star rating, js star rating

The html is as follows:

<Div class = "starts"> <ul id = "pingStar"> <li rel = "1" title = "very poor, 1 point: "> </li> <li rel =" 2 "title =" poor, give 2 points "> </li> <li rel =" 3 "title =" average, give 3 points "> </li> <li rel =" 4 "title =" Good, 4 points </li> <li rel = "5" title = "Very good, score 5 "> </li> <span id =" dir "> </span> </ul> <input type =" hidden "value =" "id =" startP "> </div>

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.bkjia.com/jiaoben/195077.html

How to submit the selected scores for the JS star rating!

Similar to the submission of the following "content" text field, set a hidden field
<Input type = "hidden" name "score" id = "score"/> when you click the satisfaction star, the generated value is assigned to the hidden field, during background processing, you can save the score to the database.
 
Jquery star rating code, to the decimal point, with css

The decimal point is just an average result. · There are many tutorials on the Internet ·