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:
$(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);
}
原文:http://www.cnblogs.com/webgg/p/5138467.html