纯js实现类似淘宝星级评分功能

来源：互联网发布：网络招聘编辑：程序博客网时间：2024/05/17 08:09

使用js实现简单星级评分

简单原理：

通过mouseover,mouseout,click三个简单的DOM事件操作实现星级评分功能

效果：

鼠标移动，在浮动框中显示星级评分具体内容，点击后在右边显示最终评分结果

代码块：

css样式省略不做介绍只贴上body和js的代码块

body代码：

<body><div id="d1"><div id="d3">移动鼠标点击评分</div><div id="d4"><div></div><div></div><div></div><div></div><div></div></div><div id="d5">fdsaf</div><div id="d6"><em id="e"></em><br /><p></p></div></div></body>

javascript代码：

<script type="text/javascript">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";            }        }    }</script>

效果图

这里写图片描述

0 0

纯js实现类似淘宝星级评分功能

使用js实现简单星级评分

目录：

简单原理：

效果：

代码块：

效果图