码云笔记前端博客
Home > 免费资源 > js实现星级评分点击效果

js实现星级评分点击效果

2019-03-28 分类：免费资源 作者：码云 阅读（2875）

本文共计1325个字，预计阅读时长需要4分钟。

今天这个例子可以说是在电商项目中经常用到，我们在购物确认收货后，会有一个给商家评分这一环节，怎么实现星级打分效果呢？那么接下来就为大家通过js实现星级评分效果，具体要求，当鼠标滑过星级会提示星级描述，点击星级评论可以打分，我会把源码附上，有需要的直接拿去就可以用。老规矩，先看一下效果图：

js实现星级评分点击效果

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
<div id="star">
        <span>js星级评论打分</span>
        <ul>
            <li><a href="javascript:;">1</a></li>
            <li><a href="javascript:;">2</a></li>
            <li><a href="javascript:;">3</a></li>
            <li><a href="javascript:;">4</a></li>
            <li><a href="javascript:;">5</a></li>
        </ul>
        <span></span>
        <p></p>
    </div>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
*{margin:0;padding:0;list-style-type:none;}
body{color:#666;font:12px/1.5 Arial;}
/* star */
#star{position:relative;width:600px;margin:20px auto;height:24px;}
#star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
#star ul{margin:0 10px;}
#star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(images/star.png) no-repeat;}
#star strong{color:#f60;padding-left:10px;}
#star li.on{background-position:0 -28px;}
#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(images/icon.gif) no-repeat;padding:7px 10px 0;}
#star p em{color:#f60;display:block;font-style:normal;}

javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
window.onload = function (){
    var oStar = document.getElementById("star");
    var aLi = oStar.getElementsByTagName("li");
    var oUl = oStar.getElementsByTagName("ul")[0];
    var oSpan = oStar.getElementsByTagName("span")[1];
    var oP = oStar.getElementsByTagName("p")[0];
    var i = iScore = iStar = 0;
    var aMsg = [
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
                "不满意|部分有破损，与卖家描述的不符，不满意",
                "一般|质量一般，没有卖家描述的那么好",
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
                ]
    for (i = 1; i <= aLi.length; i++){
        aLi[i - 1].index = i;
        //鼠标移过显示分数
        aLi[i - 1].onmouseover = function (){
            fnPoint(this.index);
            //浮动层显示
            oP.style.display = "block";
            //计算浮动层位置
            oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
            //匹配浮动层文字内容
            oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
        };
        //鼠标离开后恢复上次评分
        aLi[i - 1].onmouseout = function (){
            fnPoint();
            //关闭浮动层
            oP.style.display = "none"
        };
        //点击后进行评分处理
        aLi[i - 1].onclick = function (){
            iStar = this.index;
            oP.style.display = "none";
            oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
        }
    }
    //评分处理
    function fnPoint(iArg){
        //分数赋值
        iScore = iArg || iStar;
        for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
    }
}

以上就是前端开发的js星级评分效果的全部内容，很简单，由于时间倡促，所以详细的知识点不做过多的解释，有不合理的地方欢迎留言指正。

「除特别注明外，本站所有文章均为码云笔记原创，转载请保留出处！」

赞(17) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
赏 17

觉得文章有用就打赏一下文章作者

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

共有 0 条评论 - js实现星级评分点击效果

博客简介

码云笔记 mybj123.com，一个专注Web前端开发技术的博客，主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享，分享各种科普知识和实用优秀的代码，以及分享些热门的互联网资讯和福利！码云笔记有你更精彩！
更多博客详情请看关于博客

【新用户限量秒杀】热门云产品限量秒杀，云服务器1核1G 首年99元

最新文章

热门文章

热门标签

@font-face after ajax before canvas canvas画布 content css css3 CSS3动画 css3特效 CSS技巧 css教程 ES6 form表单 html5 iframe input JavaScript Java教程 jquery jQuery插件 meta React Sass函数 select SEO SEO优化 setTimeout svg table TypeScript vue vue教程 webpack wordpress WordPress主题 WordPress建站 WordPress插件 WordPress教程 wp教程 前端面试题 导航菜单 插件 数组 段子 浏览器 滚动条 盒模型 闭包

精彩评论

站点统计

  • 文章总数： 456 篇
  • 分类数目： 13 个
  • 独立页面： 8 个
  • 评论总数： 215 条
  • 链接总数： 15 个
  • 标签总数： 1009 个
  • 建站时间： 494 天
  • 访问总量： 8652492 次
  • 最近更新： 2019年10月21日