1. 程式人生 > >純js實現類似淘寶星級評分功能

純js實現類似淘寶星級評分功能

window.onload=function(){ var div=document.getElementById('d4').getElementsByTagName('div'); var dd=document.getElementById('d4'); var pf=document.getElementById('d5'); var li=document.getElementsByClassName('light'); var k=document.getElementById('d6'); var att=k.getElementsByTagName('em'
)[0]; var cri=k.getElementsByTagName('p')[0]; var arrya=[ "很不滿意", "不滿意", "一般", "滿意", "非常滿意"]; var arryb=[ "差得太離譜,與賣家描述的嚴重不符,非常不滿", "部分有破損,與賣家描述的不符,不滿意", "質量一般,沒有賣家描述的那麼好", "質量不錯,與賣家描述的基本一致,還是挺滿意的"
, "質量非常好,與賣家描述的完全一致,非常滿意"]; var index=n=0; for(i=0;i<=div.length;i++){ div[i].onmouseover=function(){//滑鼠移入事件,顯示星級和浮動層評分內容 k.className="vis"; pf.className=""; for(i=0;i<=div.length;i++){ if(div[i]==this){index=i}//獲取被選中星星的索引
} for(i=0;i<=index;i++){ div[i].className="light"; pf.innerHTML=(index+1)+'分 '+arrya[i]+arryb[i];//顯示最終分數和評價 k.style.left=100+index*25+'px';//實現浮動層動態移動 k.innerHTML=arrya[i]+'<br>'+arryb[i];//浮動層內容顯示 } for(i=index+1;i<=div.length;i++){ div[i].className//滑鼠移出事件,隱藏浮動層 k.className=""; } dd.onclick=function(){//滑鼠點選事件,顯示評分結果並隱藏浮動層 k.className=""; pf.className="vis"; } } }