使用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>

效果图

纯js实现类似淘宝星级评分功能相关推荐

html+css+js实现类淘宝星级宝贝评价系统
1.先上效果图鼠标悬浮效果鼠标点击效果点击后把鼠标移开依旧会恢复上次的评分 2.准备部分 1.提示框倒三角的实现看这张图片颜色比较丑.我们实现很多地方都要用到这种气泡型的东西,倒三角是它的实 ...
如何使用纯JS过掉淘宝滑块
起因众所周知淘宝滑块很难过掉,今天博主就专门研究了一下淘宝滑块, 之前博主也有研究过但是发现并不好过. 今天恰好有个项目需要淘宝登录,就有滑块验证, 说明一下博主做的是浏览器插件哦.今天博主打算在研 ...
仿淘宝星级评论的实现
1.先导入css .rating-level {list-style:none;margin:1px 0 0 20px;float:left; padding:0; width:70px; heigh ...
类似淘宝商品放大镜功能，以及offsetX、offsetY造成的鼠标移动时阴影部分会一闪一闪的不断回到左上角问题
效果:效果是当鼠标移入的时候小图出现一小块是以鼠标为中心的遮罩层,鼠标在小图移动时大图放大显示遮罩层所在的局部,且遮罩层不能超出小图位置.如下图所示: html部分从代码可知大图和小图是分别两个im ...
评价标签类似淘宝评价效果功能实现
需求:默认显示两行标签内容,点击展开显示全部标签内容,点击收起显示两行内容主要实现代码: MainActivity代码 package it520view.com.labeldemo;import ...
纯js封装一个无缝轮播
下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...
纯js逆向淘宝阿里云滑块破解
小小淘宝的滑块风控也敢班门弄斧,纯js逆向直接安排
纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...
JSF2.0与纯JS框架
2019独角兽企业重金招聘Python工程师标准>>> 用了JSF一段时间了,也写了几个组件了,对这个框架多少有了一些了解.另外我也用过EXT这样的纯JS的组件系统,因此我想对比一下 ...
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还 ...

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

使用js实现简单星级评分

目录：

简单原理：

效果：

代码块：

效果图

纯js实现类似淘宝星级评分功能相关推荐

最新文章

热门文章