JavaScript實現星級評分
window.onload = function(){ var star = document.getElementById('star'); var ul = star.getElementsByTagName('ul')[0]; var li = star.getElementsByTagName('li'); var span = star.getElementsByTagName('span')[1]; var p = star.getElementsByTagName('p')[0]; var evl = ["很不滿意|差得太離譜,與賣家描述的嚴重不符,非常不滿", "不滿意|部分有破損,與賣家描述的不符,不滿意", "一般|質量一般,沒有賣家描述的那么好", "滿意|質量不錯,與賣家描述的基本一致,還是挺滿意的", "非常滿意|質量非常好,與賣家描述的完全一致,非常滿意"]; var iStar = iArg = 0; for(i = 1;i <= li.length;i++){ li[i-1].point = i; li[i-1].onmouseover = function(){ fnPoint(this.point); p.style.left = ul.offsetLeft + this.point * this.offsetWidth - 104 + 'px'; p.innerHTML = '<em><b>'+this.point+'分</b>'+ evl[this.point-1].match(/(.+)|/)[1] + '</em>' + evl[this.point-1].match(/|(.+)/)[1]; p.style.display = 'block'; }li[i-1].onclick = function(){ iStar = this.point; p.style.display = 'none'; span.innerHTML = '<strong>'+this.point+'分'+'</strong>'+'('+evl[this.point-1].match(/\|(.+)/)[1]+')'; } li[i-1].onmouseout = function(){ fnPoint(); //可以傳參數 p.style.display = 'none'; } } function fnPoint(iArg){ var score = iArg || iStar; for(i =1;i <=li.length;i++){ li[i-1].className = score < i?'':'on'; } }
}</pre>
本文由用戶 dy223 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!