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程序设计有所帮助。
热门推荐
10 小红书平安祝福语简短
11 生日祝福语大全女孩简短
12 收生日红包祝福语 简短
13 领证幽默祝福语简短
14 法考面试祝福语简短
15 老哥出门祝福语简短语
16 送灯祝福语简短独特
17 幼儿狗年祝福语大全简短
18 好听的元旦简短祝福语