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