今天我又寫了個很酷的實例：星級評分系統（可自定義星星個數、顯示信息）
sufuStar.star();
使用默認值5個星星，默認信息
var msg = [........];
sufuStar.star(10,msg);
自定義星星個數為10、顯示信息msg格式參考默認值，條數必須和星星個數一致；
自己實現一些實例，有個好處，能增加應用各知識點的熟練度，還能檢驗出自己的薄弱項！一經發現，立即翻API文檔惡補！
不知道是不是我太笨，這個實例居然寫了整整一天！
不廢話了，先說下這個實例涉及的知識點：
1.用CSS的border來畫個三角形，并用before來把它加到其它元素上；
2.學習如何用CSS來定位元素；
3.學習事件的代理；
4.如何優化性能；
5.String對象的match方法的應用，正則表達式的應用；
6.注冊事件與事件處理，需要兼容IE的寫法；
7.學習如何利用‘||'給變量設置默認值；
8.簡化代碼：將可能要重復寫的代碼拿出來，單獨寫成一個函數；
下面是帶注釋的完整代碼，碰到不懂得就查文檔吧，以我目前的水平只能寫成這樣了，若有好的建議，歡迎前輩指出！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #star{ position: absolute; left: 0; right: 0; top: 30px; bottom: 0; margin: auto; width: 80%; font-size: 12px; } #star-div{ margin:5px; font-size: 0; } #star-div a{ display: inline-block; width: 21px; height: 21px; background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat; } #star-div .on{ background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat; } #star-info{ position: absolute; top: 55px; left: -30px; display: none; width: 155px; height: 50px; padding: 2px; line-height: 17px; border-radius: 8px; background-color: gold; z-index: 5; } #star-info:before{ content: ''; border-bottom: 10px solid gold; border-left: 10px solid rgba(0,0,0,0); border-right: 10px solid rgba(0,0,0,0); position: absolute; left: 35px; top: -10px; } #star-span{line-height: 14px} #star-info strong,#star-span strong{ color: red; } </style> <script> window.onload = function(){ var sufuStar = function (){ //工具函數 function gbyId(id){return document.getElementById(id);} function addEvent(elem,type,func){ //兼容IE if(elem.addEventListener){ elem.addEventListener(type,func,false) }else if(elem.attachEvent){ elem.attachEvent('on'+type,func) } } function getIndex(event) { //兼容IE var e = event || window.event; var t = e.target || e.srcElement; if (t.tagName.toLowerCase() === 'a') { return parseInt(t.innerHTML); } } function showInfo(index,msg){ var info = gbyId('star-info'); info.style.display = 'block'; info.style.left = index*21-51+'px'; info.innerHTML = "<strong> "+index+'分 '+msg[index-1].match(/(.+)/|/)[1]+'<br />'+'</strong>'+msg[index-1].match(//|(.+)/)[1]; } function appenStar(elem,nums){ var frag = document.createDocumentFragment(); //為了提高性能,因使用DocumentFragment一次性append,這樣頁面只重新渲染一次 for(var i = 0;i<nums;i++){ var a =document.createElement('a'); a.innerHTML = i+1; a.href = "javascript:;"; //阻止瀏覽器的點擊鏈接的默認行為 frag.appendChild(a); } elem.appendChild(frag); } //主體函數 function star(num,myMsg){ var n = num||5; //當num有值則取其值,無值則取默認值5; var clickStar=curentStar=0; //clickStar保存點擊狀態 var msg = myMsg||[ "很不滿意|差得太離譜，與賣家描述的嚴重不符，非常不滿", "不滿意|部分有破損，與賣家描述的不符，不滿意", "一般|質量一般，沒有賣家描述的那么好", "滿意|質量不錯，與賣家描述的基本一致，還是挺滿意的", "非常滿意|質量非常好，與賣家描述的完全一致，非常滿意" ]; var starContainer = gbyId('star-div'); appenStar(starContainer,n); addEvent(starContainer,'mouseover',over); //采用事件代理模式(通過<a>標簽的父元素starContainer來代理事件) addEvent(starContainer,'mouseout',out); addEvent(starContainer,'click',click); function over(event){ if(getIndex(event)){ //若getIndex(event)取不到值,說明當前觸發事件的目標不是<a>標簽 var index = getIndex(event); change(index); showInfo(index,msg); } } function out(event){ change(); //將評分設為已點擊狀態clickStar gbyId('star-info').style.display = 'none' } function click(event) { if (getIndex(event)) { var index = getIndex(event); clickStar = index; //保存點擊狀態 gbyId('star-info').style.display = 'none'; gbyId('star-span').innerHTML = "<strong>" + index + '分 ' + msg[index - 1].match(/(.+)/|/)[1] + '</strong>'+'<br />'+ msg[index - 1].match(//|(.+)/)[1]; } } function change(index){ curentStar = index||clickStar; for(var i=0;i<n;i++){ starContainer.children[i].className = i<curentStar ? 'on' : '' } } } return { star:star } }(); //這里的()表示函數立即執行,這樣變量sufuStar才能調用匿名函數的返回值star //調用執行: sufuStar.star(num,myMsg),參數可為空,參數num,myMsg將設為默認值 sufuStar.star(); } </script></head><body><div id="star"> <span>點擊星星打分:</span> <div id="star-div"> </div> <span id="star-span"></span> <p id="star-info"> </p></div></body></html>以上這篇原生JS實現-星級評分系統的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
