美文网首页
星级评分系统

星级评分系统

作者: 安好每个你 | 来源:发表于2018-03-25 15:24 被阅读39次
star
 {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        .container {
            width: 400px;
            margin: 10px auto;
        }
        #star ul, #star span {
            float: left;
            display: inline;
            height: 19px;
            line-height: 19px;
        }
        #star ul {
            margin: 0 10px;
        }
        #star li {
            float: left;
            cursor: pointer;
            background: url("images/star-img.png") no-repeat;
            width: 18px;
            text-indent: -9999px;
            background-position: -28px -2px;
            height: 18px;
            padding-right: 5px;
        }
        #star li.on {
            background-position: -2px -2px;
        }
        p {
            display: none;
            position: absolute;
            top: 30px;
            width: 159px;
            padding: 0 10px;
            font-style: normal;
            background-color: #eee;
            border: 1px solid #ddd;
        }
        em {
            display: block;
            color: orangered;
        }
        strong {
            margin-left: 10px;
            color: orangered;
        }
<body>
    <div id="star" class="container">
        <span style="font-size: 18px">点击星星就能打分</span>
        <ul id="box" class="stars">
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
        </ul>
        <span></span>
        <p></p>
    </div>

<script>
    var star = document.getElementById('star'),
        imgs = star.getElementsByTagName('li'),
        op = document.getElementsByTagName('p')[0],
        box = document.getElementById('box'),
        oSpan = document.getElementsByTagName('span')[1],
        count = 0;
    var aMsg = [
        '很不满意|差的太离谱',
        '不满意|部分有破损',
        '一般|质量一般',
        '满意|质量不错',
        '非常满意|质量非常好'
    ];

    for (var i=1; i<=imgs.length; i++) {
        imgs[i-1].index = i;
        imgs[i-1].onmouseover = function () {
            imgSrc(this.index);
            op.style.display = 'block';
            op.style.left = box.offsetLeft + this.index * this.offsetWidth - 80 + 'px';
            op.innerHTML = '<em><b>' + this.index + '</b> 分 ' + aMsg[this.index-1].match(/(.+)\|/)[1] + '</em>' +
                    aMsg[this.index-1].match(/\|(.+)/)[1]
        };
        imgs[i-1].onmouseout = function () {
            imgSrc();
            op.style.display = 'none';
            console.log(1);
        };
        imgs[i-1].onclick = function () {
            count = this.index;
            op.style.display = 'none';
            oSpan.innerHTML = '<strong>' + this.index + '分</strong> (' + aMsg[this.index-1].match(/\|(.+)/)[1] + ')';
        };
        function imgSrc(a) {
            score = a || count;
            for (var i=0; i<imgs.length; i++) {
                imgs[i].className = i < score ?'on' : '';
            }
        }
    }

代码在网上搜的,其实一开始自己写的星星图片是用<img>src引进的, 但是在鼠标移动到不同的星星时, 总是闪一下, 就把星星图设为背景图了,但还是闪, 其实把星星之间用padding隔开就好了, 用margin的话每次离开一颗星星都要先把所有星星变为灰色, 就会闪一下

正则就是分别选择|前或|后的文本
浮动层左边的位置就是星星左边界再向左80px

background-position

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

相关文章

  • 星级评分系统

    代码在网上搜的,其实一开始自己写的星星图片是用 的src引进的, 但是在鼠标移动到不同的星星时, 总是闪一下, 就...

  • 星级评分

    一、背景 许多App都会有评价功能,这个时候或许会需要实现星级评分,下面我们来简单的实现一个星级评分功能。 二、简...

  • 星级评分条,不用ratingbar

    星级评分条,不用ratingbar# 使用seekbar 说起星级评分,最先想到的就是ratingbar...但是...

  • 星级评分条

    XML属性 1.android:isIndicator 是否允许改变,true为步允许2.android:n...

  • 星级评分显示

    首先创建一个StarView 最后在要显示星级评价的界面将其带入 最后来一张显示图

  • 星级评分StarScoreDemo

    今天做了一个点击/拖动小星星评分功能的控件,效果如下: 支持点击和滑动 原理简介:一.使用了UIControl控件...

  • 前端新手项目练习之星级评分

    前端新手项目练习之星级评分 前端新手记录自己在网络上找到的前端练习项目。 项目简介 一个简单的星评分系统,鼠标移上...

  • Excel根据数据进行“星级评分”也可以很有趣【D15-2020

    今日学习来源:微信公众号“Excel学习营” 今日学习内容:Excel星级评分 根据数值进行星级评分,让数据更直观...

  • 星星评分控件TQStarRatingView揭秘!(一)

    今天为大家带来一个iOS星级评分控件的实现,欢迎拍砖。 在github上搜索iOS星级评分控件,可以看到TQSta...

  • iOS实践:一步步实现星级评分

    星级评分在几乎每一个电商平台都会出现,其实在这个星级评分里面不管有多少分,最终我们只用到了三张图片。我们把这个星级...

网友评论

      本文标题:星级评分系统

      本文链接:https://www.haomeiwen.com/subject/ywghcftx.html