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:;}
#ScoreBlock .score_div a:hover{ background:url(../Img/ScoreFull.png);left:;}
#ScoreBlock .score_div a.clibg{ background:url(../Img/ScoreFull.png);left:;}
#txtScore{color:#CC0000;font-family:Georgia;font-size:16px;font-weight:bold;width:50px;}
使用的图片:
(尺寸大小均为20*20 像素)
ScoreBorder.png
( 实际图片没有这个黑色的阴影 - -!)
ScoreFull.png
20160520—JS打分控件的更多相关文章
- js树形控件
js树形控件 ztree http://www.treejs.cn/
- Atitit.js图表控件总结
Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...
- js设置控件的隐藏与显示的两种方法
js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...
- 简洁JS 日历控件 支持日期和月份选择
原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...
- JS日历控件优化(增加时分秒)
JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy ...
- js获取控件位置以及不同浏览器中的差别
js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...
- JS日历控件集合----附效果图、源代码
http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...
- 利用js日期控件重构WEB功能
开发需求:网页中的日期部门(注册页面和查询条件)都用js日期控件重写 页面一:更新员工页面 empUpdate.jsp 中增加 onfocus 事件 入职日期:<input id="h ...
- 简洁js日历控件的使用
往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...
随机推荐
- SGU 521 North-East ( 二维LIS 线段树优化 )
521. "North-East" Time limit per test: 0.5 second(s)Memory limit: 262144 kilobytes input: ...
- 洛谷 - P3803 -【模板】多项式乘法(FFT) - NTT
https://www.luogu.org/problemnew/show/P3803 看别人偏偏就是要用NTT去过.实验证明大概是这样用.求0~n的多项式和0~m的多项式的乘积.注意MAXN取值.A ...
- asp.net Excel导入和导出
1.Excel数据导入到数据库中: //该方法实现从Excel中导出数据到DataSet中,其中filepath为Excel文件的绝对路径,sheetname为表示那个Excel表: p ...
- js常见的设计模式一
1.观察者模式 定义一些一对多的关系,将一系列的观察者对目标函数感兴趣,将自己添加进目标函数,当目标函数状态发生改变时,发送通知,以此通知附加在目标上的观察者 /* 目标 */ class subje ...
- 锚点定位且不改变url地址
锚点定位且不改变url html 事件触发<li v-for="(item,index) in couponsList.swaps" :key="index&quo ...
- 关于javaweb 项目 ssm框架 启动tomcat服务器同时启动一个socket服务
1.创建监听类 import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import javax. ...
- 认识一下Qt用到的开发工具
http://c.biancheng.net/view/3868.html Qt 不是凭空产生的,它是基于现有工具链打造而成的,它所使用的编译器.链接器.调试器等都不是自己的,Qt 官方只是开发了上层 ...
- 统计学习方法——第二章的c++实现
1.东西搞丢了,只写一部分 2.算法那收敛性 证明逻辑: a.γ是yi*(wopt*Xi)最小值 b.R是Xi最小值 c.k<=(R/γ)^2 难打公式,直接说,Wk由Wk-1迭代而来,所以事实 ...
- P4513 最大连续字段和 (线段树+区间合并)
题目链接:https://www.luogu.org/problem/P4513 题目大意:单点修改和求区间最大连续字段和 解题思路:很容易想到是用线段树来做,但是如何进行维护呢? 每个维护区间 [L ...
- rocketmq运维管理
# 运维管理--- ### 1 集群搭建 #### 1.1 单Master模式 这种方式风险较大,一旦Broker重启或者宕机时,会导致整个服务不可用.不建议线上环境使用,可以用于本地测试. #### ...