JS实现带提示的星级评分效果完整实例

本文实例讲述了射流研究…实现带提示的星级评分效果。分享给大家供大家参考，具体如下：

这是一款射流研究…仿淘宝网的星级评分系统，鼠标放在上边可以显示星级代表的评分级别，鼠标点击时会选中当前的星级，目前此功能在网页上十分流行，虽然是仿做的，但已经很不错的功能了，希望大家喜欢！

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-start-level-pf-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title星级评分系统/titlestyle body，div，ul，li，p { margin:0划水：0;} body { color : # 666 font :12 px/1.5 Arial；} ul { list-style-type : no；} # star { position:relative宽度宽度：600pxmargin:10px汽车；}#star ul，# star span { float : leftisplay : inline高度：19 px行高：19 px} # star ul { margin :0 10px } # star Li { float : left宽度：24 px光标：指针指针；文本-缩进：-9999像素；背景：url(images/star.png)无重复；} #星强{ color: # f60填充-左侧：10 px} #明星李。在{背景-位置：0-28px；} # star p { position : absolutetop :20 px宽度宽度：159像素高度：60 pxdisplay : none background : URL(图像/图标。gif)不重复；padd :7 px 10px 0；} # star p em { color: # f60显示：块；字体样式：正常；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var oStar=document。getelementbyid(' star ')；var AlI=Ostar。GetElementsBytagname(' Li ')；var OUl=Ostar。GetElementsBytagname(' ul ')[0]；var OspAN=Ostar。GetElementsBytagname(' span ')[1]；var oP=Ostar。GetElementsBytagname(' p ')[0]；var I=iScore=iStar=0；var aMsg=['很不满意|差得太离谱，与卖家描述的严重不符，非常不满', '不满意|部分有破损，与卖家描述的不符，不满意', '一般|质量一般，没有卖家描述的那么好', '满意|质量不错，与卖家描述的基本一致，还是挺满意的', '非常满意|质量非常好，与卖家描述的完全一致，非常满意]为(I=1；I=AlI . len thi){ AlI[I-1].索引=我；//鼠标移过显示分数aLi[i - 1].onmouseover=function(){ fnPoint(this。索引)；//浮动层显示作品风格。display=' block//计算浮动层位置作品风格。左=OUl。远离这个。索引*这个。offsetweidth-104 ' px '；//匹配浮动层文字内容oP.innerHTML='em' this.index '分aMsg[this.index - 1].匹配(/(。)\|/)[1] '/em' aMsg[this.index - 1].匹配(/\|(。)/)[1] };//鼠标离开后恢复上次评分aLi[i - 1].onmouseout=function(){ fnPoint()；//关闭浮动层作品风格。display=' none ' }；//点击后进行评分处理aLi[i - 1].onclick=function(){ iStar=this。指数；作品风格。显示='无'；奥斯潘。innerhtml=' strong '(这。索引)分/strong (' aMsg[this.index - 1]).匹配(/\|(。)/)[1] ')' } } //评分处理函数fnPoint(iArg) { //分数赋值iScore=iArg | | iStarfor(I=0；I AlI . len thi)AlI[I].className=i iScore？在":"上；}};/script/head dydiv id=' star ' span点击星星就能打分/span ul lia href=' JAVAScript :'1/a/Li lia href=' JavaScript :'2/a/Li lia href=' JavaScript :'3/a/Li lia href=' JavaScript :'4/a/Li lia href=' JavaScript :'5/a/Li/ul span/span p/p/div/body/html希望本文所述对大家Java脚本语言程序设计有所帮助。