JS实现仿百度文库评分功能

百度文库分享平台大家都知道，今天小编通过一段实例代码给大家介绍基于射流研究…实现百度文库评分功能，先给大家展示效果图吧。

具体代码如下所示：

！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无标题文档/title link。bootcss。com/bootstrap/3。3 .7/CSS/bootstrap。量滴CSS ' rel='样式表链接。bootcss。com/font-awesome/4。7 .0/CSS/font-牛逼。量滴CSS ' rel='样式表样式* { padding:0margin:0 } #内容{宽度：700像素高度：50 pxborder:1px固体# cccmargin:50px汽车；线高：50 px} #内容跨度。标题{显示：行块；宽度宽度：100像素高度：50 px线高：50 pxfont-size :20 px字体粗细：加粗；color: # FF9933} #内容ul。star { display : inline-block；宽度宽度：160像素高度：50 px线高：50 px光标：指针指针；} #内容ul。星星李{ font-size :30 pxcolor : # CCC } # content p { display : inline-block；宽度：80 px高度：50 px线高：50 pxfont-size :20 px字体粗细：加粗；color: # ff9933} #内容tip { display : inline-block；height :45 pxborder :1 px # CCC红色；背景# FFFFCC可见性：隐藏；} #内容tip span { display : inline-block；高度：40 px线高：40 pxpadding:0px 10px} #内容。提示ul { display : inline-block；位置：相对；} #内容tip ul I { position : absolutetop :70%；右：18%；}.红色{ color:red边距-左侧：10 px}.橙色{ color:orange}/style脚本窗口。onload=function(){ var content=document。getelementbyid(' content ')；var score=文档。getelementbyid(' score ')；var OUl=内容。GetElementsByclassName(' stars ')[0]；瓦尔阿里=OUl。GetElementsBytagname(' Li ')；var tip=内容。getelementsbyclassname(' tip ')[0]；var arr=['较差','较差','还行','推荐','力荐'];乌尔。onmouseover=function(){ tip。风格。可见性='可见'；} OUl。onmouseout=function(){ tip。风格。可见性='隐藏'；} for(var I=0；iaLi.lengthi ){ aLi[i].索引=我；aLi[i].onclick=function(){ mark(this。索引)；乌尔。索引=这个。指数；} aLi[i].onmouseover=function(){ for(var I=0；iLi . LengiI){ AlI[I]。风格。color=' # CCC}马克(这。索引)；} aLi[i].onmouseout=function(){ for(var I=0；i=this.indexI){ AlI[I]。风格。color=' # CCC} if(oUl.index！==' undefined '){ mark(parsent(OUl。索引))；} } }函数show(){提示。风格。可见性=提示。风格。可见性==='隐藏'？可见':'隐藏；}函数标记（索引){ for(var I=0；I=索引；i ){ aLi[i].style.color=index 2？灰色' : '橙色；} score.innerHTML=arr[index]？arr[index] : '待评价；} }/脚本/标题dydiv id=' content ' span class=' title ' I class=' red ' */I总体评价：/span ul=' stars ' Li=' fa-star '/Li Li=' fa-star '/Li Li=' fa-star '/Li Li=' fa-star '/Li Li=' fa-star '/Li Li=' fa-star '/Li/ul p id=' score '待评价/p div class='tip' span小提示：点击小星星可以打分/span ul Li-star橙色/Li Li-star橙色/李丽星橙/李丽星橙/李丽星橙/李丽星o/李易星指针-o'/i /ul /div/div/body/html以上所述是小编给大家介绍的射流研究…实现仿百度文库评分功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！