javascript模拟评分控件实现方法
本文实例讲述了javascript模拟评分控件实现方法。分享给大家供大家参考。具体实现方法如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>动态设置style(评分效果)</title>
<scripttype="text/javascript">
//查找一个元素在数组中的索引位置
functionArrayIndexOf(arr,element){
for(vari=0;i<arr.length;i++){
if(arr[i]==element){
returni;
}
}
return-1;
}
functionIniEvent(){
vartbl=document.getElementById("tblRating");
vartds=tbl.getElementsByTagName("td");
for(vari=0;i<tds.length;i++){
vartd=tds[i];
td.onclick=tdOnClick;
td.style.cursor="pointer";//设置光标手型
}
}
functiontdOnClick(){
vartbl=document.getElementById("tblRating");
vartds=tbl.getElementsByTagName("td");
//查找当前点击的td的索引
varindex=ArrayIndexOf(tds,this);
//之前的td改为红色
for(vari=0;i<=index;i++){
tds[i].style.background="red";
}
//之后的td改为白色
for(vari=index+1;i<tds.length;i++){
tds[i].style.background="white";
}
}
</script>
</head>
<bodyonload="IniEvent()">
<tableid="tblRating">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。