20160520—JS打分控件

效果预览：



可实现功能：鼠标在滑动条内左右滑动，文本框内分数变动；文本框输入数字，滑动条长度自动改变。

JavaScript代码：

$(function () { scoreFun($("#ScoreBlock")); })

function scoreFun(object) {
var defaults = {
SocreWidth: 2, //每一分 的宽度
SocreCount: 100, //a的个数
ScoreSet: 1, //每个a的分数设置
ScoreDiv: "ScoreDiv", //a的容器
ScoreTextID: "txtScore"//接收用的TextBox，根据ID查找
};
options = $.extend({},
defaults);
var socre_div = $("#" + options.ScoreDiv);
var socre_txt = $("#" + options.ScoreTextID);
var socre_set = options.ScoreSet;
var now_cli;
var socre_w = options.SocreWidth;
var len = options.SocreCount;
socre_div.width(socre_w * len);
for (var i = 0; i < len; i++) {
var newSpan = $("<a href='javascript:void(0)' id='SocreA" + i + "'></a>");
newSpan.css({
"left": 0,
"width": socre_w * (i + 1),
"z-index": len - i
});
newSpan.appendTo(socre_div)
}
socre_div.find("a").each(function (index, element) {
//点击滑动条 锁定分数
//$(this).click(function () {
//    now_cli = index; //这是锁定分数的关键
//    show(index, $(this));
//});
//鼠标在滑动条上悬浮时 锁定分数
$(this).mouseenter(function () {
now_cli = index;//这是锁定分数的关键
show(index, $(this));
});
//鼠标离开时
$(this).mouseleave(function () {
if (now_cli >= 0) {
var scor = socre_set * (parseInt(now_cli) + 1);
socre_div.find("a").removeClass("clibg");
socre_div.find("a").eq(now_cli).addClass("clibg");
var ww = socre_w * (parseInt(now_cli) + 1);
socre_div.find("a").eq(now_cli).css({
"width": ww,
"left": "0"
});
socre_txt.val(scor);
} else {
socre_div.find("a").removeClass("clibg");
socre_txt.val("");
}
})
});
//获取分数
function show(num, obj) {
var n = parseInt(num) + 1;
var lefta = num * socre_w;
var ww = socre_w * n;
var scor = socre_set * n;
object.find("a").removeClass("clibg");
obj.addClass("clibg");
obj.css({
"width": ww,
"left": "0"
});
//传值
socre_txt.val(scor);
}
};

//只允许输入数字的验证
function RepNumber(obj) {
var reg = /^[\d]+$/g;
if (!reg.test(obj.value)) {
var txt = obj.value;
txt.replace(/[^0-9]+/, function (val) {//匹配第一次非数字字符
obj.value = val.replace(/\D/g, ""); //将非数字字符替换成""
})
}
//最大值为100
if (obj.value.length > 2) {
obj.value = 100;
}

//文本变动时 滑动条自动变动
var scoreA = $("#SocreA" + (obj.value - 1));
$("#ScoreDiv").find("a").removeClass("clibg");
scoreA.addClass("clibg");

}

HTML代码：

<div id="ScoreBlock">
<div class="score_b">
</div>
<div id="ScoreDiv" class="score_div" title="左右滑动鼠标调节分数">
</div>
<div class="score_b">
</div>
<p>
您的评分：
　　　　　　<input id="txtScore" type="text" onkeyup="javascript:RepNumber(this)" maxlength="3" />
分
</p>
</div>

CSS样式：

/*评分相关*/
#ScoreBlock{ margin:10px; height:20px;}
#ScoreBlock .score_div,#ScoreBlock p{ float:left;}
#ScoreBlock p{ margin:0px; padding-left:20px; line-height:20px; display:inline-block;}
#ScoreBlock p span{ color:#C00; font-size:16px; font-family:Georgia, "Times New Roman", Times, serif;}
#ScoreBlock .score_b { background:url(../Img/ScoreFull.png);width:2px; height:20px;  float:left; position:relative;}
#ScoreBlock .score_div { background:url(../Img/ScoreBorder.png);width:160px; height:20px;  position:relative;}
#ScoreBlock .score_div a{ height:20px; display:block;  position:absolute;left:0;}
#ScoreBlock .score_div a:hover{ background:url(../Img/ScoreFull.png);left:0;}
#ScoreBlock .score_div a.clibg{ background:url(../Img/ScoreFull.png);left:0;}
#txtScore{color:#CC0000;font-family:Georgia;font-size:16px;font-weight:bold;width:50px;}

使用的图片：

（尺寸大小均为20*20 像素）

ScoreBorder.png



（ 实际图片没有这个黑色的阴影 - -！）

ScoreFull.png