純js實現類似淘寶星級評分功能
阿新 • • 發佈:2019-02-07
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";
}
}
}