原生javascript实现星级评价功能

因为用到自定义字体，我首先到阿里巴巴矢量图标库下载了自己喜欢的星星样式。需要一个空心星星，一个实心星星。

按照使用方法，如下图所示引入这些文件。

接下来是布局，三行评价，都是一样的样式，那就用一个无序列表吧！

    <ul><li class="goods">宝贝与描述相符：<i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><em></em></li><li class="att">卖家的服务态度：<i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><em></em></li><li class="trans">物流服务的质量：<i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i><em></em></li></ul>

给star类加了一个伪类用来显示星星图标：

        .star:after{font-family: 'Hui-iconfont';font-size:25px;font-style:normal;content:"\e702";vertical-align:middle;/*使文字和图标对齐*/color:#eee;}下面这是实心星星的：.current:after{font-family: 'Hui-iconfont';font-size:25px;font-style:normal;content:"\e6ff";vertical-align:middle;}

布局完是这样的：

下面开始写js.

    function comment(liName,content){var li=document.getElementsByClassName(liName)[0];var star=li.getElementsByTagName("i");var currentClick=0,num=0;for(var i=1;i<=star.length;i++){star[i-1].index=i;star[i-1].onmouseover=function(){show(this.index);}star[i-1].onmouseout=function(){//选择i=1；就是为了把0让给这一步，鼠标移开不显示实星星。show(0);}star[i-1].onclick=function(){currentClick=this.index;show(currentClick);}}function show(index){//当点击后，又经过又离开，传递参数0；但短路语句直接返回currentClick,以此保证点击之后再经过也不改变。num=index||currentClick;for(var j=0;j<star.length;j++){star[j].className=(j<num)?'current':'star';if(num==1||num==2){star[j].style.color="#666"} else if(num==3||num==4){star[j].style.color="orange";} else{star[j].style.color="red";}}li.getElementsByTagName("em")[0].innerText=num>0?content[num-1]:"";}}var arr=["一分 失望","两分 不满","三分 一般","四分 满意","五分 惊喜"];comment("goods",arr);comment("att",arr);comment("trans",arr)

就可以实现基本的效果啦！

原生javascript实现星级评价功能相关推荐

原生jquery实现星级评分功能，鼠标滑过点亮星星
背景:首先,这个功能是很常见的一个效果,无论是PC端还是移动端,评分和反馈都屡见不鲜,但是大多数实现都是直接引用组件库里的组件来实现的,而我今天要给大家分享的是通过原生js自己手写实现的同样效果,针对 ...
仿淘宝实现多行星级评价
最近再做一个评价功能,当时首先想到的是淘宝的评价功能,感觉那个不错,由于是初学者所以还不是很会,于是在网上百度了一下,我发现网上的都是只有一行星级评价功能,所以我在他 <script type= ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享，前面有一篇原生js实现星级评 - phpStudy...
使用jQuery实现星级评分代码分享前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. http://s.thsi.cn/js/jquery-1.7.2. ...
原生JavaScript+WebSocket+nodejs实现聊天室功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. WebSocket也是前端非常重要的技术栈. 现在各种网站.App.小程序都伴有即时通信的功能.WebSoc ...
@小程序vant-rate星级评价Button多选功能实现
效果图 wxml 部分 <view class="nav_box"><view class="rate"><van-ratenam ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...

原生javascript实现星级评价功能

原生javascript实现星级评价功能相关推荐

最新文章

热门文章