JavaScript实现星级评分
事件onmouseover
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript星级评分</title>
<styletype="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:130px;margin:100pxauto10px;}
</style>
<scripttype="text/javascript">
functionArrayIndexOf(arr,element){
for(vari=0;i<arr.length;i++){
if(arr[i]==element){
returni;
}
}
return-1;
}
functionGetTds(){
vartbl=document.getElementById("tblMain");
vartds=tbl.getElementsByTagName("td");
returntds;
}
functionInitEvent(){
vartds=GetTds();
for(vari=0;i<tds.length;i++){
vartd=tds[i];
td.onmouseover=TdOnclick;
td.style.cursor="pointer";
}
}
functionTdOnclick(){
vartds=GetTds();
varindex=ArrayIndexOf(tds,this);
for(vari=0;i<=index;i++){
vartd=tds[i];
td.innerHTML="★";
}
for(varj=index+1;j<tds.length;j++){
vartd=tds[j];
td.innerHTML="☆";
}
}
</script>
</head>
<bodyonload="InitEvent()"class="wrapper">
<tableid="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短