精确评分js ff/ie

<script>show_start({'submit':1,'call_func':'alert'});</script>

 

pingfen.js

//使用方法请看 function show_start(vars_obj)后面说明 var obj_copy = null; var move_timer = null; function show_start(vars_obj) {//动态载入评分条面板 /* 调用方式 在调用前先载入本js文件: <script src="pingfen.js"></script> 在需要显示的地方插入下面代码即可(注:可以不给某属性赋值,让程序使用默认值): 多句形式: <script> //第一步,声明对象并给属性赋值 var vars_obj = {'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'}; 或 var vars_obj = {}; vars_obj.img_folder = 'http://www.xx.com/ddd/'; //第二步 show_start(vars_obj); </script> 或写成一句的形式: <script>show_start({'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'});</script> 调用方式说明结束 vars_obj:js对象,此对象声明方法 var vars_obj = {}; vars_obj对象拥有属性和值说明: img_folder:图片文件夹路径字符串,注意结束时字符串最后必须是/,默认是本js文件夹; 用到三个图片:transparent.gif(img对象的透明图片);star_dark.gif(暗星);star_light.gif(亮星) star_dark_gif_name:暗星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_dark star_light_gif_name:亮星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_light transparent_gif_name:img对象src(亮img)gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是transparent border_color:暗星左右边border颜色;表示色彩的字符串值;默认白色 border_width:暗星左右边border宽度;大于0数字;单位px;默认5 submit:是否用于提交,是时可以更改值;1|0整数值;默认0 rating_max:100%时分数是多少,1或以上数字(支持小数),默认是5; rating:评分初始值,数字,0到rating_max间,超过只保留终值(0或rating_max);默认是0; star_width:单个星图片宽度;1或以上整数;单位是px;默认是15 star_num:100%值时星个数,1或以上数字(支持带小数),默认是5 star_height:单个星图片的高度;1或以上整数;单位是px,默认是14 rating_input_name:用于提交评论值的input的name,默认是 pingfen,只允许使用英文和数字 call_func:点击改变值时调用函数hander,并传入改变后的值,所以函数中可以接受一个参数,默认是空; 满分的宽度 = 星个数*星宽度; 下面html代码必须值: 父宽(方式不限); 父左边框宽度(内联css); input宽度(100%,或者父宽不指定,input撑开); 父对象:position:relative(让左边的值相对body); */ if (!vars_obj) vars_obj = {}; if (typeof(vars_obj.img_folder) != 'string') vars_obj.img_folder = ''; if (typeof(vars_obj.star_dark_gif_name) != 'string') vars_obj.star_dark_gif_name = 'star_dark'; if (typeof(vars_obj.star_light_gif_name) != 'string') vars_obj.star_light_gif_name = 'star_light'; if (typeof(vars_obj.transparent_gif_name) != 'string') vars_obj.transparent_gif_name = 'transparent'; if (typeof(vars_obj.border_color) != 'string') vars_obj.border_color = 'red'; vars_obj.border_width = parseInt(vars_obj.border_width); if (isNaN(vars_obj.border_width) || (vars_obj.border_width <=0) ) vars_obj.border_width = 5; if (isNaN(vars_obj.rating_max) || (vars_obj.rating_max < 1) ) vars_obj.rating_max = 5; if (isNaN(vars_obj.rating) || (vars_obj.rating<0) ) vars_obj.rating = 0; else if (vars_obj.rating>vars_obj.rating_max) vars_obj.rating = vars_obj.rating_max; vars_obj.star_width = parseInt(vars_obj.star_width); if (isNaN(vars_obj.star_width) || (vars_obj.star_width<1) ) vars_obj.star_width = 15; vars_obj.star_num = parseFloat(vars_obj.star_num); if (isNaN(vars_obj.star_num) || (vars_obj.star_num < 1) ) vars_obj.star_num = 5; vars_obj.star_height = parseInt(vars_obj.star_height); if (isNaN(vars_obj.star_height) || (vars_obj.star_height <1 ) ) vars_obj.star_height = 14; if ( (typeof(vars_obj.rating_input_name)!='string') || (!/^[a-z][a-z0-9]*$/gi.test(vars_obj.rating_input_name)) ) vars_obj.rating_input_name = 'pingfen'; if ( (typeof(vars_obj.call_func)!='string') || (!/^[a-z][a-z0-9]*$/gi.test(vars_obj.call_func)) ) vars_obj.call_func = ''; var width_100 = vars_obj.star_width*vars_obj.star_num;//100%宽度 var title = ' title="[' + get_c(vars_obj.rating/vars_obj.rating_max) + ']' + vars_obj.rating/vars_obj.rating_max + '%" /n'; var bar_htm = '<span /n' + ' call_func="' + vars_obj.call_func +'" /n' + title + ' width_100= "' + width_100 + '" /n'; if (vars_obj.submit) bar_htm +=' οnmοusemοve="l_star_e_chang(this,event);" /n' + ' onClick="l_star_e_chang(this,event,true);" /n' + ' οnmοuseοut="d_star_e_out();" /n' + ' οnmοuseοver="d_star_e_in();" /n' ;//开关,是否加改变事件 bar_htm += ' style="' + ' display:block; /n' + ' position:relative; /n' + ' background:url(' + vars_obj.img_folder+vars_obj.star_dark_gif_name + '.gif) repeat-x ; /n' + ' border:solid ' + vars_obj.border_color + ' ; /n' + ' border-width:0 ' + vars_obj.border_width + 'px; /n' + ' text-align:left; /n' + ' height:' + vars_obj.star_height + 'px; /n' + ' overflow-y:hidden; /n' + ' padding:0px; /n' + ' margin:0px; /n' + ' width:' + width_100 + 'px; /n' + ' " > /n'; bar_htm +='<img src="' + vars_obj.img_folder+vars_obj.transparent_gif_name + '.gif" /n' + title ; if (vars_obj.submit) bar_htm +=' οnmοuseοut="l_star_e_out();" /n' + ' οnmοuseοver="l_star_e_in();" /n' ;//开关,是否加改变事件 bar_htm += ' style="' + ' width:' + vars_obj.rating/vars_obj.rating_max*100 + '%; /n' + ' height:' + vars_obj.star_height + 'px; /n' + ' background:url(' + vars_obj.img_folder+vars_obj.star_light_gif_name + '.gif) repeat-x; /n' + ' margin:0px; /n' + ' " /> /n'; bar_htm +='<input type="hidden" /n' + ' id="'+vars_obj.rating_input_name+'" /n' + ' name="' +vars_obj.rating_input_name+'" /n' + ' value="'+vars_obj.rating+'" /n'+ ' star_w_n = "' + vars_obj.rating/vars_obj.rating_max*width_100 + '" /n' + ' rating_max = "' + vars_obj.rating_max + '" /n' + ' /> /n'; bar_htm += '</span> /n'; document.writeln(bar_htm); } function l_star_e_chang(obj,event,rec) {//移动此标时显示实时值:亮星实时宽度,评分实时(X%) obj_copy = obj; obj_copy.mouse_x = event.clientX;//此标在x面的位置 obj_copy.mouse_y = event.clientY;//此标在y面的位置 obj_copy.star = obj_copy.children[0];//亮星对象 obj_copy.input = obj_copy.children[1];//input对象 obj_copy.star_w = obj_copy.getAttribute('width_100');//亮星100%最大宽度 obj_copy.left = obj_copy.offsetLeft + parseInt(obj_copy.style.borderLeftWidth);//窗口内边到对象左边的值 obj_copy.star_w_n = obj_copy.mouse_x - obj_copy.left;//亮星新宽度=此标-星左边 if (obj_copy.star_w_n < 0) obj_copy.star_w_n = 0; else if (obj_copy.star_w_n > obj_copy.star_w) obj_copy.star_w_n = obj_copy.star_w; if (rec) { obj_copy.input.setAttribute('star_w_n',obj_copy.star_w_n);点击了要记录 亮星恢复时使用 var new_value = obj_copy.input.getAttribute('rating_max') * get_w_100() / 100;//亮星占比转化成具体分值 obj_copy.input.setAttribute('value',new_value); eval(obj_copy.getAttribute('call_func') + '(' + new_value + ')');//亮星占比转化成具体分值 } obj_copy.star.title = obj_copy.title = '[' + get_c() + ']' + get_w_100() + '%';//在input中显示新宽度%分比和级别,和在父对象中提示 obj_copy.star.style.width = obj_copy.star_w_n + 'px';//设置亮星新宽度 //document.title = '此标,星左边,新宽,父宽=' + obj_copy.mouse_x + ',' + obj_copy.left + ',' + obj_copy.star_w_n + ',' + obj_copy.star_w;//显示调试信息 } function get_w_100(star_w_n,star_w) {//新%分比,4去5入 = 亮星新宽度/ 亮星100%最大宽度 if ( ( (!star_w_n) || (!star_w) ) && (!obj_copy) ) return 0;//防错处理 return Math.round( (isNaN(star_w_n)?obj_copy.star_w_n:star_w_n) / (isNaN(star_w)?obj_copy.star_w:star_w) * 100); } function get_c(w_100) {//评分分级,传入x%中的x,值范围0-100;空值默认使用动态移动的当前值, if (isNaN(w_100)) w_100 = get_w_100(); if (w_100< 40) return '很差'; else if (w_100< 60) return '一般'; else if (w_100< 80) return '满意'; else if (w_100<= 100) return '很好'; else return '无法判断'; } function reset_star() {//只要处于区域内就不能重置 if (!obj_copy) return 0; if ( obj_copy.star.getAttribute('in') != 'yes' ) {//发现移出区域了就还原上次点击状态 obj_copy.star.style.width = obj_copy.input.getAttribute('star_w_n') + 'px';//亮星恢复宽度 obj_copy.star.title = obj_copy.title = '[' + get_c(get_w_100(obj_copy.input.getAttribute('star_w_n'))) + ']' + get_w_100(obj_copy.input.getAttribute('star_w_n')) + '%';//input恢复说明 obj_copy = null; } } function l_star_e_out() {//移出亮星,通知重置事件不在亮星内了. if (!obj_copy) return 0; obj_copy.star.setAttribute('in',''); } function l_star_e_in() {//进入亮星,通知重置事件还处于区域内 clearTimeout(move_timer); if (!obj_copy) return 0; obj_copy.star.setAttribute('in','yes'); } function d_star_e_out() {//d_out移出区域或进入亮星时触发,检查是否要重置 clearTimeout(move_timer); move_timer = setTimeout('reset_star();',16); } function d_star_e_in() {//d_in清除重置事件 if (!obj_copy) return 0; obj_copy.star.setAttribute('in',''); clearTimeout(move_timer); }

 

pingfen.js  单纯实现评分效果,并提供评分输出接口

 

使用方法:

 

<script>
    function setd(my)
    {
    alert(my);//my就是点击更改后的最新评分
    }
    show_start({'submit':1,'call_func':'setd'});
    </script>

 

//使用方法请看 function show_start(vars_obj)后面说明 var obj_copy = null; var move_timer = null; function show_start(vars_obj) {//动态载入评分条面板 /* 调用方式 在调用前先载入本js文件: <mce:script src="pingfen.js" mce_src="pingfen.js"></mce:script> 在需要显示的地方插入下面代码即可(注:可以不给某属性赋值,让程序使用默认值): 多句形式: <mce:script type="text/javascript"><!-- //第一步,声明对象并给属性赋值 var vars_obj = {'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'}; 或 var vars_obj = {}; vars_obj.img_folder = 'http://www.xx.com/ddd/'; //第二步 show_start(vars_obj); // --></mce:script> 或写成一句的形式: <mce:script type="text/javascript"><!-- show_start({'属性名1':属性值,'属性名2':属性值,'img_folder':'http://www.xx.com/ddd/'}); // --></mce:script> 调用方式说明结束 vars_obj:js对象,此对象声明方法 var vars_obj = {}; vars_obj对象拥有属性和值说明: img_folder:图片文件夹路径字符串,注意结束时字符串最后必须是/,默认是本js文件夹; 用到三个图片:transparent.gif(img对象的透明图片);star_dark.gif(暗星);star_light.gif(亮星) star_dark_gif_name:暗星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_dark star_light_gif_name:亮星gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是star_light transparent_gif_name:img对象src(亮img)gif文件名(注意:不用写.gif,只需要写文件名即可)字符串,默认是transparent border_color:暗星左右边border颜色;表示色彩的字符串值;默认白色 border_width:暗星左右边border宽度;大于0数字;单位px;默认5 submit:是否用于提交,是时可以更改值;1|0整数值;默认0 rating_max:100%时分数是多少,1或以上数字(支持小数),默认是5; rating:评分初始值,数字,0到rating_max间,超过只保留终值(0或rating_max);默认是0; star_width:单个星图片宽度;1或以上整数;单位是px;默认是15 star_num:100%值时星个数,1或以上数字(支持带小数),默认是5 star_height:单个星图片的高度;1或以上整数;单位是px,默认是14 call_func:点击改变值时调用函数hander,并传入改变后的值,所以函数中可以接受一个参数,默认是空; 满分的宽度 = 星个数*星宽度; 下面html代码必须值: 父宽(方式不限); 父左边框宽度(内联css); 父对象:position:relative(让左边的值相对body); */ if (!vars_obj) vars_obj = {}; if (typeof(vars_obj.img_folder) != 'string') vars_obj.img_folder = ''; if (typeof(vars_obj.star_dark_gif_name) != 'string') vars_obj.star_dark_gif_name = 'star_dark'; if (typeof(vars_obj.star_light_gif_name) != 'string') vars_obj.star_light_gif_name = 'star_light'; if (typeof(vars_obj.transparent_gif_name) != 'string') vars_obj.transparent_gif_name = 'transparent'; if (typeof(vars_obj.border_color) != 'string') vars_obj.border_color = 'red'; vars_obj.border_width = parseInt(vars_obj.border_width); if (isNaN(vars_obj.border_width) || (vars_obj.border_width <=0) ) vars_obj.border_width = 5; if (isNaN(vars_obj.rating_max) || (vars_obj.rating_max < 1) ) vars_obj.rating_max = 5; if (isNaN(vars_obj.rating) || (vars_obj.rating<0) ) vars_obj.rating = 0; else if (vars_obj.rating>vars_obj.rating_max) vars_obj.rating = vars_obj.rating_max; vars_obj.star_width = parseInt(vars_obj.star_width); if (isNaN(vars_obj.star_width) || (vars_obj.star_width<1) ) vars_obj.star_width = 15; vars_obj.star_num = parseFloat(vars_obj.star_num); if (isNaN(vars_obj.star_num) || (vars_obj.star_num < 1) ) vars_obj.star_num = 5; vars_obj.star_height = parseInt(vars_obj.star_height); if (isNaN(vars_obj.star_height) || (vars_obj.star_height <1 ) ) vars_obj.star_height = 14; if ( (typeof(vars_obj.call_func)!='string') || (!/^[a-z][a-z_0-9]*$/gi.test(vars_obj.call_func)) ) vars_obj.call_func = ''; var width_100 = vars_obj.star_width*vars_obj.star_num;//100%宽度 var title = ' title="[' + get_c(vars_obj.rating/vars_obj.rating_max) + ']' + vars_obj.rating/vars_obj.rating_max + '%" /n'; var bar_htm = '<span /n' + title + ' call_func="' + vars_obj.call_func +'" /n' + ' star_width_click = "' + vars_obj.rating/vars_obj.rating_max*width_100 + '" /n' + ' rating_max = "' + vars_obj.rating_max + '" /n' + ' width_100= "' + width_100 + '" /n'; if (vars_obj.submit) bar_htm +=' οnmοusemοve="l_star_e_chang(this,event);" /n' + ' onClick="l_star_e_chang(this,event,true);" /n' + ' οnmοuseοut="d_star_e_out();" /n' + ' οnmοuseοver="d_star_e_in();" /n' ;//开关,是否加改变事件 bar_htm += ' style="' + ' display:block; /n' + ' position:relative; /n' + ' background:url(/'' + vars_obj.img_folder+vars_obj.star_dark_gif_name + '.gif/') repeat-x ; /n' + ' border:solid ' + vars_obj.border_color + ' ; /n' + ' border-width:0 ' + vars_obj.border_width + 'px; /n' + ' text-align:left; /n' + ' height:' + vars_obj.star_height + 'px; /n' + ' overflow-y:hidden; /n' + ' padding:0px; /n' + ' margin:0px; /n' + ' width:' + width_100 + 'px; /n' + ' " mce_style="' + ' display:block; /n' + ' position:relative; /n' + ' background:url(/'' + vars_obj.img_folder+vars_obj.star_dark_gif_name + '.gif/') repeat-x ; /n' + ' border:solid ' + vars_obj.border_color + ' ; /n' + ' border-width:0 ' + vars_obj.border_width + 'px; /n' + ' text-align:left; /n' + ' height:' + vars_obj.star_height + 'px; /n' + ' overflow-y:hidden; /n' + ' padding:0px; /n' + ' margin:0px; /n' + ' width:' + width_100 + 'px; /n' + ' " > /n'; bar_htm +='<img src="' + vars_obj.img_folder+vars_obj.transparent_gif_name + '.gif" mce_src="' + vars_obj.img_folder+vars_obj.transparent_gif_name + '.gif" /n' + title; if (vars_obj.submit) bar_htm +=' οnmοuseοut="l_star_e_out();" /n' + ' οnmοuseοver="l_star_e_in();" /n' ;//开关,是否加改变事件 bar_htm += ' style="' + ' width:' + vars_obj.rating/vars_obj.rating_max*100 + '%; /n' + ' height:' + vars_obj.star_height + 'px; /n' + ' background:url(/'' + vars_obj.img_folder+vars_obj.star_light_gif_name + '.gif/') repeat-x; /n' + ' margin:0px; /n' + ' " mce_style="' + ' width:' + vars_obj.rating/vars_obj.rating_max*100 + '%; /n' + ' height:' + vars_obj.star_height + 'px; /n' + ' background:url(/'' + vars_obj.img_folder+vars_obj.star_light_gif_name + '.gif/') repeat-x; /n' + ' margin:0px; /n' + ' " /> /n'; bar_htm += '</span> /n'; document.writeln(bar_htm); eval(vars_obj.call_func + '(' + vars_obj.rating + ')');//初始化默认值 } function l_star_e_chang(obj,event,rec) {//移动此标时显示实时值:亮星实时宽度,评分实时(X%) obj_copy = obj; obj_copy.mouse_x = event.clientX;//此标在x面的位置 obj_copy.mouse_y = event.clientY;//此标在y面的位置 obj_copy.star = obj_copy.children[0];//亮星对象 obj_copy.star_width_max = obj_copy.getAttribute('width_100');//亮星100%最大宽度 obj_copy.left = obj_copy.offsetLeft + parseInt(obj_copy.style.borderLeftWidth);//窗口内边到对象左边的值 obj_copy.star_width_move = obj_copy.mouse_x - obj_copy.left;//亮星新宽度=此标-星左边 if (obj_copy.star_width_move < 0) obj_copy.star_width_move = 0; else if (obj_copy.star_width_move > obj_copy.star_width_max) obj_copy.star_width_move = obj_copy.star_width_max; if (rec) { obj_copy.setAttribute('star_width_click',obj_copy.star_width_move);点击了要记录 亮星恢复时使用 var new_value = obj_copy.getAttribute('rating_max') * get_w_100() / 100;//亮星占比转化成具体分值 eval(obj_copy.getAttribute('call_func') + '(' + new_value + ')');//亮星占比转化成具体分值 } obj_copy.star.title = obj_copy.title = '[' + get_c() + ']' + get_w_100() + '%';//显示新宽度%分比和级别,在父对象中提示 obj_copy.star.style.width = obj_copy.star_width_move + 'px';//设置亮星新宽度 //document.title = '此标,星左边,新宽,父宽=' + obj_copy.mouse_x + ',' + obj_copy.left + ',' + obj_copy.star_width_move + ',' + obj_copy.star_width_max;//显示调试信息 } function get_w_100(star_width_move,star_width_max) {//新%分比,4去5入 = 亮星新宽度/ 亮星100%最大宽度 if ( ( (!star_width_move) || (!star_width_max) ) && (!obj_copy) ) return 0;//防错处理 return Math.round( (isNaN(star_width_move)?obj_copy.star_width_move:star_width_move) / (isNaN(star_width_max)?obj_copy.star_width_max:star_width_max) * 100); } function get_c(w_100) {//评分分级,传入x%中的x,值范围0-100;空值默认使用动态移动的当前值, if (isNaN(w_100)) w_100 = get_w_100(); if (w_100< 40) return '很差'; else if (w_100< 60) return '一般'; else if (w_100< 80) return '满意'; else if (w_100<= 100) return '很好'; else return '无法判断'; } function reset_star() {//只要处于区域内就不能重置 if (!obj_copy) return 0; if ( obj_copy.star.getAttribute('in') != 'yes' ) {//发现移出区域了就还原上次点击状态 obj_copy.star.style.width = obj_copy.getAttribute('star_width_click') + 'px';//亮星恢复宽度 obj_copy.star.title = obj_copy.title = '[' + get_c(get_w_100(obj_copy.getAttribute('star_width_click'))) + ']' + get_w_100(obj_copy.getAttribute('star_width_click')) + '%';//恢复说明 obj_copy = null; } } function l_star_e_out() {//移出亮星,通知重置事件不在亮星内了. if (!obj_copy) return 0; obj_copy.star.setAttribute('in',''); } function l_star_e_in() {//进入亮星,通知重置事件还处于区域内 clearTimeout(move_timer); if (!obj_copy) return 0; obj_copy.star.setAttribute('in','yes'); } function d_star_e_out() {//d_out移出区域或进入亮星时触发,检查是否要重置 clearTimeout(move_timer); move_timer = setTimeout('reset_star();',16); } function d_star_e_in() {//d_in清除重置事件 if (!obj_copy) return 0; obj_copy.star.setAttribute('in',''); clearTimeout(move_timer); }

 

效果

 

功能:

些标在二个块之间时移动时实时显示亮星宽度和评级;不点移出后就恢复最后那次点击数据;点击就重新记录当前数据;