首页 > 其他分享 >星级评分功能实现

星级评分功能实现

时间:2023-09-07 12:04:54浏览次数:40  
标签:function 功能 postfix 评分 offsetY var 星级 document event


       我这个是在前一篇文章所介绍的js脚本基础上做的修改。(请先看前面一篇《星级评分效果 -js实现 》)

       由于把前面的脚本引入项目里,发现当鼠标移到星星图片上获取到的OY值并不在1到19之间,所以导致该功能不起作用。后来通过调试测试发现在IE中当鼠标移动到星星图片上通过event获取到的offsetY的值无论页面向上向下滑动多少其值永远在1到19之间。

所以修改了程序脚本,原来OY修改为event.offsetY,,有人会问了在firefox中没有offsetY这个属性,其实在firefox中的layerY与IE中的offsetY获取到的值是一样的。

      还有一点发现通过传过去的e在IE中运行并不存在,所以添加了一个判断若e不存在则获取window.event。

      主要代码如下:

      JS代码:

var starStop='undefined';

function $(v,o) { return((typeof(o)=='object'?o:document).getElementById(v)); }
function $S(o) { return((typeof(o)=='object'?o:$(o)).style); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function abPos(o) { var o=(typeof(o)=='object'?o:$(o)), z={X:0,Y:0}; while(o!=null) { z.X+=o.offsetLeft; z.Y+=o.offsetTop; o=o.offsetParent; }; return(z); }
function XY(e,v) { 
  //var o=agent('msie')?{'X':event.clientX+document.body.scrollLeft,'Y':event.clientY+document.body.scrollTop}:{'X':e.pageX,'Y':e.pageY}; 
  var o;
  if(!e) e = window.event;
  if(e.pageX){
	  o={'X':e.pageX,'Y':e.pageY};
  }else if(e.clientX){
  	 o={'X':e.clientX + document.body.scrollLeft,'Y':e.clientY + document.body.scrollTop};
  }
 
  return(v?o[v]:o); 
}

function starMouse(postfix,e,o) { 
  if(starStop || isNaN(starStop)) { starStop=0;
	document.οnmοusemοve=function(e) {
		//debugger;
		var n=postfix;
		var p=abPos($('star'+n)), x=XY(e), oX=x.X-p.X, oY=x.Y-p.Y; staNum=o.id.substr(4);
		
		var mouseY ; //获取鼠标所在位置确定鼠标移到了星星图像上
		if(!e){
			e = window.event;
		}
		if(e.offsetY){
			mouseY = e.offsetY;
		}else if(e.layerY){
			mouseY = e.layerY;
		}else{
			mouseY = oY;
		}
		if(oX<1 || oX>84 || mouseY<0 || mouseY>19) { 
			starStop=1; 
			starRevert(postfix); 
		}else {
			$S('starCur'+n).width=oX+'px';
			$S('starUser'+n).color='#111';
			$('starUser'+n).innerHTML=Math.round(oX/84*100)+'分';
		}
	};
} };

function starUpdate(postfix,e,o) {
	var n=postfix, v=parseInt($('starUser'+n).innerHTML);
	n=o.id.substr(4); 
	$('starCur'+n).title=v;
	
	 //更新评分隐藏域值
	if($('memo')){
		$('memo').value=v;
	}
};

function starRevert(postfix) { 
    var n=postfix, v=parseInt($('starCur'+n).title);
	$S('starCur'+n).width=Math.round(v*84/100)+'px';
	$('starUser'+n).innerHTML=(v>0?Math.round(v)+'分':'');
	$('starUser'+n).style.color='#888';
	document.οnmοusemοve='';
};

     HEML代码:

<div id="star"><div class="label">星级:</div><ul id="starRating" class="star" οnmοusedοwn="starUpdate(/'Rating/',event,this)" οnmοusemοve="starMouse(/'Rating/',event,this)" >
		    	             <li id="starCurRating" class="curr" title="80" style="width: 67px;"></li>
                             </ul>
                             <div style="color: rgb(136, 136, 136);" mce_style="color: #888888;" id="starUserRating" class="user">80分</div></div>

     默认值设定为80分,其主要通过<li>中背景图片的宽度来达到所展示出来的星级评分效果。

     公式为:Math.round(分数/84*100)

80/84*100)=67

     Css样式则没太多变化只是引用图片的路径做了适当修改,样式代码可见前一篇文章。

标签:function,功能,postfix,评分,offsetY,var,星级,document,event
From: https://blog.51cto.com/u_2544485/7395608

相关文章

  • 干货贴|免费AI数据标注工具-多功能语音音频标注软件
    图像标注实际应用比较广泛,因此前几期我们分享了不少图像标注的内容,不过大家也有反馈希望对文本标注、语音标注有一些学习,小A那么宠粉,必须安排起来。工欲善其事,必先利其器。标注工具是数据标注行业的基础,一款好用的标注工具是提升标注效率与产出高质量标注数据的关键。之前我也分享......
  • Java低代码开发:jvs-list(列表引擎)功能(二)字段及样式配置
    字段的增减进入列表页设计器-页表设计界面,点击新增一行、或者删除按钮,可以对字段进行增减操作,如果对于权限的列表页,可以使用批量创建字段的按钮:字段的批量设置,点击批量添加如下图所示字段为中文名称,每一行为一个字段,默认去除空格默认字段系统提供创建人、创建时间、修改人、修改时......
  • office2022正式版下载 office官方下载安装(含教程) 新功能介绍
    软件特色1.更适合个人使用2.每人拥有独立账号和独立1TB云存储,无需担心隐私安全.3.office365离线安装包官方版支持1台电脑或Mac、1台平板和1部智能手机(Windows、iOS、Android皆可)4.独享更多高效炫酷新功能,且每月更新5.Word、Excel、powerpoint、outlook和OneNote完全安......
  • office下载-office官方下载2023最新版 新功能介绍
    Office2019全称MicrosoftOffice2019,是由微软公司推出的一套在Windows操作系统的办公软件套装,其中包括常用的组件有:PPT、Word、Excel、Powerpoint等十几款软件,而现在这些软件都成为了我们大家每天都会用到的办公软件,完全为我们用提供跨应用功能,从而帮助您在更短的时间内创出自己想......
  • Adobe Acrobat Reader DC最新版下载 新功能介绍
    AdobeAcrobatReader是用于打开和使用在AdobeAcrobat中创建的AdobePDF的工具。虽然无法在Reader中创建PDF,但是可以使用AdobeAcrobatReader查看、打印和管理PDF。在Reader中打开PDF后,可以使用多种工具快速查找信息。如果您收到一个PDF表单,则可以在线填写并以电子方......
  • Adobe Acrobat Reader DC下载 新功能介绍
    adobereaderprodc是Acrobat软件系列(Pro、Standard、Reader)中的免费版阅读器。本次提供的是AdobeAcrobatProDC版,acrobatprodc注册机以及安装教程。最新版的AcrobatProDC让你比以往更快、更加轻松地创建、签署和共享PDF。软件地址:看置顶贴功能介绍AcrobatReaderDC中提......
  • 「Dreamweaver安装包大全下载」DW软件安装包 新功能介绍
    AdobeDreamweaver2022是Adobe公司全新发布的可视化网页制作编辑软件,DreamweaverCC包含实时检查和CSS设计工具等多项增强功能,可以帮助用户更加轻松地创建和更新桌面平台和移动设备的网页内容,另外,新的元素快速检查功能可以帮助网页设计师速检查、预览及编辑众多的HTML标记等。使......
  • 纵横支付完整源码/Q币NDF抖音虎牙YY陪玩支付系统/游戏支付通道/腾讯游戏支付通道/多功
    这个源码是完整可用的,主流游戏系统完美融合一体的多功能支付系统,这个是多商户系统全开源的,版本为2021-01-26版本!、全网独家!!      有需要的请点击下载:免费提取码:ioxn现程序问题为:本地提交订单至外部接口,由于外部接口服务商停止服务,现无返回订单信息,因此无法出码的问题,如......
  • 视频集中存储/云存储/磁盘阵列EasyCVR平台分组批量绑定/取消设备功能详解
    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台视频能力丰富灵活,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。视频汇聚融合管理平台EasyCVR既具备传统安防视频监控的能力,也具备接入AI智能分......
  • 智能工厂数采SaaS平台是什么?有什么功能?
    集成商在面对传统的分布式项目组建设备通信与监控系统时,需要自己购买服务器、公网IP、组网设备、监控软件等,搭建成本高,实施周期长,同时需要专人维护,易用性弱,扩展性差。对此,数之能提供智能工厂数采SaaS平台,帮助搭建低成本、稳定可靠、快捷易用的链路系统。 针对分布式设备数据实时监......