原生js实现星级评分

今天来实现下星级评分，后边并跟有评价文字。

html代码如下：

<span class="star"><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b><b class="ct-star  ic-star-off"></b>
</span>
<span class="star-txt"></span>

css如下：

.ct-star {display: inline-block;margin: 0 1px;width: 19px;height: 19px;background: url(img/stars.png) no-repeat;vertical-align: -2px;cursor: pointer;}.ic-star-off {background-position: -39px 0;}

js如下：

<script>window.onload=function(){var aSpan=document.getElementsByClassName("star")[0];var aStxt=document.getElementsByClassName("star-txt")[0];var aBstar=aSpan.getElementsByTagName("b");var arrBtxt=["很差","较差","还行","推荐","力荐"];var num=0;var onOff=true;for(var i= 0;i<aBstar.length;i++){aBstar[i].index=i;//鼠标移入aBstar[i].οnmοuseοver=function(){if(onOff) {num = this.index;aStxt.innerHTML = arrBtxt[num];for (var i = 0; i <=this.index; i++) {aBstar[i].style.backgroundPosition = "0 0";}}};//鼠标移开aBstar[i].οnmοuseοut=function(){if(onOff){//设定个开关，等开关为真就执行鼠标移除的代码aStxt.innerHTML="";for(var i=0;i<=this.index;i++){aBstar[i].style.backgroundPosition="-39px 0";}}};//鼠标点击aBstar[i].οnclick=function(){onOff=false;//开关为假就不执行鼠标移除的代码//先清空aStxt.innerHTML="";for(var i=0;i<aBstar.length;i++){aBstar[i].style.backgroundPosition="-39px 0";}//点击当前星星，之前的都点亮包含自己num = this.index ;aStxt.innerHTML=arrBtxt[num];for(var i=0;i<=this.index;i++){aBstar[i].style.backgroundPosition="0 0";}};}}</script>

代码运行效果如下：

转载于:https://www.cnblogs.com/web001/p/8035325.html

原生js实现星级评分相关推荐

星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享，前面有一篇原生js实现星级评 - phpStudy...
使用jQuery实现星级评分代码分享前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. http://s.thsi.cn/js/jquery-1.7.2. ...
js实现星级评分效果（非常规5个li代码）
1. 前言此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
原生jquery实现星级评分功能，鼠标滑过点亮星星
背景:首先,这个功能是很常见的一个效果,无论是PC端还是移动端,评分和反馈都屡见不鲜,但是大多数实现都是直接引用组件库里的组件来实现的,而我今天要给大家分享的是通过原生js自己手写实现的同样效果,针对 ...
js版星级评分入门级原生js实现
先理思路: 第一部分:HTML 第二部分:CSS 1.常规部分通配符 2.居中盒子部分 3. li标签(星星载体)部分 4.满意度盒子部分 5.评语盒子部分 6.星星改变位置部分第 ...
（商品评价页）商品星级评分html+css+js
html部分: <div class="evaluate_main"><div class="evaluate_title"><d ...
移动端星级评分效果的实现
星级评分在网页当中是经常用到的,今天特地用原生的JS实现了在移动端中的星级评分效果.由于在移动端中是没有鼠标事件的,所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同,就是要把相应的事件转成 ...
[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; < ...
angular 指令渲染_Angularjs渲染的 using 指令的星级评分系统示例
本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统.但目前什么都不输出到屏幕上...... ...
jQuery Raty星级评分插件使用方法
转载自 jQuery Raty星级评分插件使用方法使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com ...

原生js实现星级评分

原生js实现星级评分相关推荐

最新文章

热门文章