dom实现类似淘宝的星级评分

不念不忘少年蓝@ 2023-06-22 06:21 9阅读 0赞

星级评分本质上是两种星星图片之间的转换。  
代码如下（五角星(1).png是指空白五角星图，五角星.png是指选中的五角星图）：

<div class="wrap">
        <div class="score">
            <img src="五角星(1).png" alt="">
            <img src="五角星(1).png" alt="">
            <img src="五角星(1).png" alt="">
            <img src="五角星(1).png" alt="">
            <img src="五角星(1).png" alt="">
        </div>
        <span></span>
        </div>

js代码：

var imgs = document.getElementsByTagName('img')
            var text = document.getElementsByTagName('span')[0]
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].i = i
                imgs[i].onclick = function () {
                    //获取当前出发元素索引值
                    var index = this.i
                    //清空样式，先清空后添加
                    for (var k = 0; k < imgs.length; k++) {
                        imgs[k].src = '五角星(1).png'
                    }
                    for (var j = index; j >= 0; j--) {
                        imgs[j].src = '五角星.png'
                    }
                    if (this.i === 0) {
                        text.innerHTML = '非常差'
                    } else if (this.i === 1) {
                        text.innerHTML = '差'
                    } else if (this.i === 2) {
                        text.innerHTML = '一般'
                    } else if (this.i === 3) {
                        text.innerHTML = '好'
                    } else {
                        text.innerHTML = '非常好'
                    }
                }
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android中点击按钮获取星级评分条的评分

场景效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

矫情吗；*/ 2023年10月08日 11:39/ 0 赞/ 37 阅读

相关 Andorid实例，淘宝评分条，星级评分条应用

效果如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

骑猪看日落/ 2023年07月04日 08:40/ 0 赞/ 2 阅读

相关 dom实现类似淘宝的星级评分

星级评分本质上是两种星星图片之间的转换。代码如下（五角星(1).png是指空白五角星图，五角星.png是指选中的五角星图）： <div class="wrap"

不念不忘少年蓝@/ 2023年06月22日 06:21/ 0 赞/ 10 阅读

相关外卖项目Vue实现一个星级评分组件

星级评分在WEB开发中经常可能会用到，因此把他封装成一个vue组件是很合适的，要做的效果如下： ![1693641-20190830195241358-307305124.p

你的名字/ 2023年06月05日 08:25/ 0 赞/ 80 阅读

相关 Vue 星级评分组件

Vue 星级评分组件描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctr

向右看齐/ 2023年02月13日 11:30/ 0 赞/ 5 阅读

相关练习篇：实现一个类似淘宝的商品展示列表页面

经过前面两大部分的详细讲解，相信大家对大部分的布局方式、组件的使用、逻辑业务编写都有了很深入的了解，那么接下来我们就用前面学习的一些知识来进行一个实践：实现一个淘宝风格的商品展

野性酷女/ 2022年12月09日 11:42/ 0 赞/ 272 阅读

相关 vue手写星级评分

基于vue的星级评分方法效果图如下 ![在这里插入图片描述][20210407193414912.png] <u-image @click='score(in

素颜马尾好姑娘i/ 2022年11月16日 15:15/ 0 赞/ 155 阅读

相关原生js实现的星级评分效果

原文：[原生js实现的星级评分效果][js] 源代码下载地址：[http://www.zuidaima.com/share/1795685450615808.htm][js]

心已赠人/ 2022年08月22日 14:25/ 0 赞/ 188 阅读

相关星级评分的演示

HTML 首先我们在.rate里面加入显示的灰星星divbig_rate、亮星星divbig_rate_up、分数spans及spang和提示信息div

以你之姓@/ 2022年06月18日 08:15/ 0 赞/ 193 阅读

相关 jQuery Raty - 不错的星级评分插件

在做商品评价时，一般情况下，我们需要一个星级评分的组件，而jQuery Raty恰好满足我们的需求。一、展示 ![图片描述][20160824084534980]

谁践踏了优雅/ 2021年09月11日 01:24/ 0 赞/ 353 阅读