自己做的一个可以用在pc端移动端上点星星评论

html:

<div class="comment-box">
　　<div class="info star-info cl docSkill">
　　　　<span class="lbl">医术</span>
　　　　<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="info star-info cl docAttit">
　　　　<span class="lbl">态度</span>
　　　　<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="请填写评论内容" maxlength="120"></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: -227px -36px;//灰色星星的位置

}

.star .m-icon {

 display: inline-block;

}

.m-star-gray {

background-position: -196px -36px;//点亮星星的位置

}

.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 () {
    //点星星
    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'); //获取当前的数字
        numChange(bool, $this, $num, $b);
    });
});
 
function isChinese(str) {  //判断是不是中文
    var reCh = /[u00-uff]/;
    return !reCh.test(str);
}
 
function numChange(bool, $this, $num, $b) {
    var strlen = 0, //初始定义长度为0
        txtval = $.trim($this.val()),
        $par = $('.comment-input .count');
    for (var i = 0; i < txtval.length; i++) {
        if (bool == true) {
            strlen = strlen + 2; //中文为2个字符
        } else {
            strlen = strlen + 1; //英文一个字符
        }
    }
    strlen = Math.ceil(strlen / 2); //中英文相加除2取整数
    if ($num - strlen < 0) {
        $par.html('-' + Math.abs($num - strlen)); //超出的样式
        $par.css('color', '#F00');
    } else {
        $par.html(($num - strlen)); //正常时候
    }
    $b.html($num - strlen);
}