Self made one can be used on the PC end of the mobile end point Star Comment

Html:

<div class= "Comment-box";
<div class= "info star-info cl Docskill";
<span class= "LBL" > Medicine </span>
<div class= "value Star" data-value= "5";
<em class= "M-icon M-star" ></em>< br> <em class= "M-icon m-star" ></EM>
<em class= "M-icon m-star" ></EM>
< Em class= "M-icon M-star" ></EM>
<em class= "M-icon m-star" ></EM>
</div>
& Lt;/div>,
<div class= "info star-info cl docattit";
<span class= "lbl" > Attitude </span>
& Lt;div class= "Value Star" data-value= "5",
<em class= "M-icon m-star" ></EM>
<em class= "M-icon M-star" ></EM>
<em class= "M-icon m-star" ></EM>
<em class= "M-icon M-star "></EM>
<em class=" M-icon m-star "></EM>
</div>
</div>

<div class= "Comment-input" >
<span class= "Count" >120</span>
<textarea id= "txtcomment" class= "Chacktextarea" placeholder= "please fill in the comments" maxlength= "></textarea>
</div>

</div>

Css:

. Comment-box {　　 padding-top: 10px; }. star-info {　　position: relative; Height: 22px; ' padding-top: 3px; line-height: 25px; }. Comment-box. star-info { Height: 30px; }. Star-info. lbl {position: absolute; top: 4px; Left : 10px; color: #333; }. Info. value { color: #666; }. Star-info. Value {display: block; padding-left: 35px; }. M-icon { Position: relative; display: block; width: 26px; height: 26px; background: URL (... /images/my-icon.png) 0 0 no-repeat; }. M-star {background-position: location of -227px-36px;//grey stars }. Star. M-icon { display: inline-block; }. M-star-gray {background-position: -196px-36px;//lights up the star's position. }. comment-input {position: relative; padding: 15px 5px 10px 10px; font-size: 16px; Background-color: #fff; border-top: 1px solid #ccc; }. Comment-input. Count { Position: absolute; top: 2px; Right : 3px; Z-index: 1; font-size: 14px; color: #999; }. comment-input TextArea {display: block; width: 100%; height: 170px; line-height: 18px; Resize: none; font-size: 15px; } JS:

$ (function  ()  {    //points stars     var  $toComment  =  $ ('. To-comment '),         $gradecon  =  $toComment. Find ('. Comment-box ');     $gradecon. Find ('. Star '). Children ('. M-icon '). On (' click ',  function   ()  {        var  $this  = $ (this),             count = 4,             num =  $this. Index (),              $parent  =  $this. Parent ('. Star '),              $list  =  $parent. Find ('. M-icon ');          $list. Removeclass (' M-star ');         $ List.addclass (' M-star-gray ');          $parent. attr (' Data-value ',  num + 1);         for  (var i = 0; i <= count; i++ )  {            if  (I <=num)  {                $ List.eq (i). addclass (' M-star ');                  $list. EQ (i). Removeclass (' M-star-gray ');             }            else {                  $list. EQ (i). AddClass (' M-star-gray ');                  $list. EQ (i). Removeclass ('M-star ');            }         }    });     var  $chackTextarea  =  $toComment. Find (' #txtComment '),          $num  = 120;     $chackTextarea. On (' KeyUp ',  function  ()  {        var  $this  = $ (this),             medical =  $this. Val ();         var bool = ischinese (medical);         var  $b  =  $toComment. Find ('. Count ');  //gets the current number          numchange (bool,  $this,  $num,  $b);     }) ;}); Function ischinese (str)  {  //judgment is not Chinese     vaR rech = /[u00-uff]/;    return !rech.test (str);} Function numchange (bool,  $this,  $num,  $b)  {    var strlen  = 0, //initial definition length is 0        txtval = $.trim ($ This.val ()),         $par  = $ ('. Comment-input .count ');     for  (var i = 0; i < txtval.length; i++)  {        if  (bool == true)  {             strlen = strlen + 2; // Chinese is 2 characters         } else {             strlen = strlen + 1; //English one character          }   &nBSP;}     strlen = math.ceil (strlen / 2)  //Chinese and English addition 2 integer      if  ($num  - strlen < 0)  {          $par. HTML ('-'  + math.abs ($num  - strlen));  //out of Style           $par. CSS (' color ',  ' #F00 ');    } else {          $par. HTML (($num  - strlen));  //normal time     }      $b. html ($num  - strlen);}

Self made one can be used on the PC end of the mobile end point Star Comment