今天在做后台管理系统的时候，有一个需求是要给完成的任务评分，用星级显示，网上查找了一些实现方法，发现有两种方法相对来说比较简单有效。

我在这整理一下这两种方法，以后出现类似的需求可以直接拿来用了。

方法一：

1.  创建一个html页面后，先是在body里面加入如下代码：

<div οnmοuseοver="rate(this,event)">
<img src="img/star.png" title="1分" />
<img src="img/star.png" title="2分" />
<img src="img/star.png" title="3分" />
<img src="img/star.png" title="4分" />
<img src="img/star.png" title="5分" />
</div>

这里的名为star图片是空心的五星图片，可以去阿里图库下载

2.   然后js代码中写入rate方法

function rate(obj, oEvent) {
// 图片地址设置
var imgSrc = 'img/star.png'; //没有填色的星星
var imgSrc_2 = 'img/star_full.png'; //打分后有颜色的星星,这里的star_full图片时实心的有颜色的五星。
if(obj.rateFlag) return;
var e = oEvent || window.event;
var target = e.target || e.srcElement;
var imgArray = obj.getElementsByTagName("img");
for(var i = 0; i < imgArray.length; i++) {
imgArray[i]._num = i;
imgArray[i].onclick = function() {
if(obj.rateFlag) return;
obj.rateFlag = true;
//this._num+1这个值写入到数据库中,作为评分的依据。

可以在html页面加一个隐藏域，这里可以通过jquery把这个值赋值给隐藏域，保存的时候传给后台
};
}
if(target.tagName == "IMG") {
for(var j = 0; j < imgArray.length; j++) {
if(j <= target._num) {
imgArray[j].src = imgSrc_2;
} else {
imgArray[j].src = imgSrc;
}
}
} else {
for(var k = 0; k < imgArray.length; k++) {
imgArray[k].src = imgSrc;
}
}
}

这样就可以简单的实现五星评分效果了。

方法二：

一开始我是用这个方法的，但是这个方法测试时发现，jsp的页面在谷歌浏览器点击无效，也就是不会从空心五星变成实心五星，

所以后来改用上面的方法。

但是当时的实现效果还是挺好的，所以也整理出来，如果大家能发现在谷歌浏览器无效的原因，那最好了。

1.  先创建一个html页面，然后在body里面加入如下代码：

<div class="wrapper">
            <div style="margin-left: 20px;line-height: 40px;float: left">评分：</div>
            <div style="float: left;margin-left: 20px;margin-top: 5px">
                <a href="javascript:dj(1);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(2);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(3);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(4);" class="img"><img src="img/star.png"/></a>
                <a href="javascript:dj(5);" class="img"><img src="img/star.png"/></a>
            </div>
        </div>
        <input type="hidden" id="score">

这里是在每个图片上加了一个点击事件，下面有一个隐藏域来保存点击后的数值，传到后台

function dj(score){
        $("#score").val(score);
      }

score就是数字参数

2.  添加css代码

.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} 
             a{float:left;width:26px;height:20px;background:url(img/sx.png) 0 -40px no-repeat;}

3. 加入js代码

window.onload = function(){
            var star = document.getElementsByClassName('img');
            var temp = 0;
            for(var i = 0, len = star.length; i < len; i++){
                star[i].index = i;
                star[i].onmouseover = function(){
                    clear();
                    for(var j = 0; j < this.index + 1; j++){
                        star[j].style.backgroundPosition = '0 0';
                    }
                }
                star[i].onmouseout = function(){
                    for(var j = 0; j < this.index + 1; j++){
                        star[j].style.backgroundPosition = '0 -40px';
                    }
                    current(temp);
                }
                star[i].onclick = function(){
                    temp = this.index + 1;
                    current(temp);
                }
            }
            //清除所有
            function clear(){
                for(var i = 0, len = star.length; i < len; i++){
                    star[i].style.backgroundPosition = '0 -40px';
                }
            }
            //显示当前第几颗星
            function current(temp){
                for(var i = 0; i < temp; i++){
                    star[i].style.backgroundPosition = '0 0';
                }
            }
        };

OK，这样也就可以实现五星评分了

   方法一 链接

        方法二 链接

js实现五星评分的效果相关推荐

  1. 利用jquery实现电商网站常用特效之：五星评分

    这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...

  2. 五星评分，让我告诉你半颗星星怎么做

    原文链接:https://mp.weixin.qq.com/s/d_BcA6uX_8MDO89Ta0CpnA 1 概述 我们在学习微信小程序或者做项目时,应该会遇到五星评分效果情况,那么这个五星评分, ...

  3. JS实现星星评分功能实例代码(两种方法)

    转载自   JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...

  4. Vue手动封装实现一个五星评价得效果

    我是歌谣 放弃很难 但是坚持一定很酷 微信公众号关注小歌谣 一起学习前后端知识 今天要说得是实现一个vue中实现五星评价得效果 简单来说 就是封装组件把 具体需要我们了解组件间得相互传值 数据绑定等知 ...

  5. swift 简单封装的一个五星评分器

    简单易用的五星评分显示器,可单纯展示评分,也可以用来打分. github地址:https://github.com/NinoWang/WNRatingBar 效果预览 使用方法 首先导入 WNRati ...

  6. 微信小程序开发之五星评分

    一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. gif: 代码: 1.index.wxml <block wx:for="{{star ...

  7. 微信小程序 制作五星评分组件

    这是自己做的一个五星评分组件,直接放项目里用,没有抽取为一个单独的组件,因为本身就很小,下面是一个纯显示的五星评级,如果需要打分,可以在image上加上点击事件,动态改变值. index.wxml & ...

  8. 实现点亮星星评分的效果

    场景:有些需求会要求用原生去实现点亮星星评分的效果,下面做了一个简单的demo,效果如下: 1.html部分 <div class="box"><img src= ...

  9. 【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）

    <div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...

最新文章

  1. 【百度地图API】如何制作多途经点的线路导航——驾车篇
  2. Java开发中使用模拟接口moco响应中文时乱码
  3. ue4集合类型_3D游戏开发之UE4中的集合：TSet容器
  4. 为什么 PHP 中 this 和 self 访问变量的写法不一样？
  5. Git学习（一）（2015年11月12日）
  6. 程序员如何备战全国计算机二级（Python）考试？
  7. springboot——pom.xml 配置文件的设置
  8. Aitit aop之道 艾龙著 需要整合zop资料包东西 第1章 AOP的产生         1.1 软件开发方法的演进         1.2 AOP产生的前奏——把系统看做一批关注点
  9. webservice 实例 创建与 调用
  10. 哔哩哔哩mac客户端！亲测！支持big sur系统
  11. 微商公社新兵连第六天
  12. android境外支付
  13. 蓝桥杯练习题之 Fibonacci数列
  14. 获取手机唯一标识插件_H5能获取到手机设备ID或者手机浏览器唯一识别码吗
  15. 浅尝 | 从 0 到 1 Vue 组件库封装
  16. Javaweb自驾游景点查询网站设计与实现
  17. java智能算法--机器学习包
  18. autodesk系列产品无法安装解决方案
  19. Java高并发秒杀平台（Redis + RabbitMQ）
  20. c语言目标文件作用,关于编译：C语言中的目标文件是什么？

热门文章

  1. IDA7.7.220118 - The graph is too big
  2. 【苹果iMessage家庭推】MPP XMPP(Extensible Messaging and Presence Protocol
  3. hge source explor 0x8 timer
  4. 【JAVA程序设计】基于SSM+VUE前后端分离的物流管理系统
  5. ai钢笔工具怎么描线_AI钢笔如何绘制生动轮廓线（在AI软件中，如何用钢笔工具绘制出有生动轮廓线的图形？）...
  6. sql文字转换全拼_MSSQL汉字转拼音函数实现语句
  7. C# 怎样通过ip和端口向一台设备发送指令
  8. 自动浇水系统——“多喝冷水”
  9. 3D游戏模型提取、导入、导出教程
  10. Android TV 上使用的RecyclerView和焦点框架，焦点框移动效果，完胜androidTvwidget的MainUpView