原生JS实现-星级评分系统的简单实例
今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息）
sufuStar.star();
使用默认值5个星星，默认信息
varmsg=[........];
sufuStar.star(10,msg);
自定义星星个数为10、显示信息msg格式参考默认值，条数必须和星星个数一致；
自己实现一些实例，有个好处，能增加应用各知识点的熟练度，还能检验出自己的薄弱项！一经发现，立即翻API文档恶补！
不知道是不是我太笨，这个实例居然写了整整一天！
不废话了，先说下这个实例涉及的知识点：
1.用CSS的border来画个三角形，并用before来把它加到其它元素上；
2.学习如何用CSS来定位元素；
3.学习事件的代理；
4.如何优化性能；
5.String对象的match方法的应用，正则表达式的应用；
6.注册事件与事件处理，需要兼容IE的写法；
7.学习如何利用‘||'给变量设置默认值；
8.简化代码：将可能要重复写的代码拿出来，单独写成一个函数；
下面是带注释的完整代码，碰到不懂得就查文档吧，以我目前的水平只能写成这样了，若有好的建议，欢迎前辈指出！
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="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-diva{
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:10pxsolidgold;
border-left:10pxsolidrgba(0,0,0,0);
border-right:10pxsolidrgba(0,0,0,0);
position:absolute;
left:35px;
top:-10px;
}
#star-span{line-height:14px}
#star-infostrong,#star-spanstrong{
color:red;
}
</style>
<script>
window.onload=function(){
varsufuStar=function(){
//工具函数
functiongbyId(id){returndocument.getElementById(id);}
functionaddEvent(elem,type,func){//兼容IE
if(elem.addEventListener){
elem.addEventListener(type,func,false)
}elseif(elem.attachEvent){
elem.attachEvent('on'+type,func)
}
}
functiongetIndex(event){//兼容IE
vare=event||window.event;
vart=e.target||e.srcElement;
if(t.tagName.toLowerCase()==='a'){
returnparseInt(t.innerHTML);
}
}
functionshowInfo(index,msg){
varinfo=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];
}
functionappenStar(elem,nums){
varfrag=document.createDocumentFragment();//为了提高性能,因使用DocumentFragment一次性append,这样页面只重新渲染一次
for(vari=0;i<nums;i++){
vara=document.createElement('a');
a.innerHTML=i+1;
a.href="javascript:;";//阻止浏览器的点击链接的默认行为
frag.appendChild(a);
}
elem.appendChild(frag);
}
//主体函数
functionstar(num,myMsg){
varn=num||5;//当num有值则取其值,无值则取默认值5;
varclickStar=curentStar=0;//clickStar保存点击状态
varmsg=myMsg||[
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
];
varstarContainer=gbyId('star-div');
appenStar(starContainer,n);
addEvent(starContainer,'mouseover',over);//采用事件代理模式(通过<a>标签的父元素starContainer来代理事件)
addEvent(starContainer,'mouseout',out);
addEvent(starContainer,'click',click);
functionover(event){
if(getIndex(event)){//若getIndex(event)取不到值,说明当前触发事件的目标不是<a>标签
varindex=getIndex(event);
change(index);
showInfo(index,msg);
}
}
functionout(event){
change();//将评分设为已点击状态clickStar
gbyId('star-info').style.display='none'
}
functionclick(event){
if(getIndex(event)){
varindex=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];
}
}
functionchange(index){
curentStar=index||clickStar;
for(vari=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>
<divid="star">
<span>点击星星打分:</span>
<divid="star-div">
</div>
<spanid="star-span"></span>
<pid="star-info">
</p>
</div>
</body>
</html>
以上这篇原生JS实现-星级评分系统的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。