原生JS实现-星级评分系统

今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息）
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. 简化代码：将可能要重复写的代码拿出来，单独写成一个函数；

下面是带注释的完整代码，碰到不懂得就查文档吧，以我目前的水平只能写成这样了，若有好的建议，欢迎前辈指出！

*{ 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; } 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 = " "+index+'分 '+msg[index-1].match(/(.+)\|/)[1]+'
'+''+msg[index-1].match(/\|(.+)/)[1]; } function appenStar(elem,nums){ var frag = document.createDocumentFragment(); //为了提高性能,因使用DocumentFragment一次性append,这样页面只重新渲染一次 for(var i = 0;i标签的父元素starContainer来代理事件) addEvent(starContainer,'mouseout',out); addEvent(starContainer,'click',click); function over(event){ if(getIndex(event)){ //若getIndex(event)取不到值,说明当前触发事件的目标不是标签 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 = "" + index + '分 ' + msg[index - 1].match(/(.+)\|/)[1] + ''+'
'+ msg[index - 1].match(/\|(.+)/)[1]; } } function change(index){ curentStar = index||clickStar; for(var i=0;i

点击星星打分: