js模仿淘宝和百度文库的评分功能

本文分享了类似淘宝、百度文库的评分功能，由js实现，供大家参考。具体内容如下。

效果如图所示：

五个五角星被放置在一张桌子的五列中。下面是一个p，用来显示评分结果；代码如下：

body onload='changebg()'表格边框=' 0 ' align=' center ' cell padding=' 0 ' cell spacing=' 0 ' id=' maintenable ' tr style=' font-size :30 px；'TD/tdtd/tdtd/tdtd/TD/tr/tablep align=' center ' id=' result '您评论标签id=' score '/标签score/p/body的onload事件绑定到一个方法，js代码如下：

脚本类型=' text/JavaScript '函数获取索引(arr，element){//参数：数组，element；返回的同级元素的索引(var I=0；一、长度；i ) { if (arr[i]==元素){ return I；} } return-1；} function changebg() {//为每个td设置focus属性[onclick属性也可以设置]var maintenable=document . getelementbyid(' maintenable ')；//获取要设置的表vartds=maintenable . getelementsbytagname(' TD ')；//获取table document . getelementbyid(' result ')下的所有单元格。style.display=' none//将分数结果设置为隐藏(var I=0；i tds.lengthI){ var TD=TDS[I]；td.onfocus=getonfocustd.style.cursor=“指针”；//为了将鼠标设置为手持在五角星上}}函数getonfocus(){ //设置td的focus事件，var maintenable=document . getelementbyid(' maintenable ')；var TDS=maintenable . getelementsbytagname(' TD ')；var index=getindex(tds，this)；//返回响应事件的索引。这表示元素document . getelementbyid(' result ')。触发此事件的style . display='；//获取分数并显示结果。document.getelementbyid ('score ')。innertext=index1for(var I=0；一、指数1；I){ TDS[I]. style . color=' red '；} for (var i=索引1；i tds.lengthI){ TDS[I]. style . color=' black '；}} /scriptjs代码主要由三个函数组成；:change BG()；绑定到body的onload事件的函数；为了将onfocus事件绑定到每个td元素；:getonfocus()；td元素onfocus事件的实现；:getindex()；有两个参数，一个是td元素的集合数组，另一个是对应事件的td元素。请注意使用这个关键词。主要返回对应事件的元素的索引，以便将响应事件元素之前的颜色显示为红色，后面的元素显示为黑色；

以上就是本文的全部内容，希望对大家学习javascript编程有所帮助。