zoukankan      html  css  js  c++  java
  • 五星评分效果 原生js

      五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要

    <!-- 评分start -->
    <ul>    
        <li class="start_li3"><span class="grade">评分:</span>
            <label><input name="j_class" type="radio" class="disNo" value="1"><span class="start s3" onclick="start('s3',this)">★</span></label>
            <label><input name="j_class" type="radio" class="disNo" value="2"><span class="start s3" onclick="start('s3',this)">★</span></label>
            <label><input name="j_class" type="radio" class="disNo" value="3"><span class="start s3" onclick="start('s3',this)">★</span></label>
            <label><input name="j_class" type="radio" class="disNo" value="4"><span class="start s3" onclick="start('s3',this)">★</span></label>
            <label><input name="j_class" type="radio" class="disNo" value="5"><span class="start s3" onclick="start('s3',this)">★</span></label>
        </li>
    </ul>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul,li{list-style: none;}
        .start_li3{
            -moz-user-select: -moz-none;
           -webkit-user-select: none;
           -ms-user-select: none;
               user-select: none;
        }
        .disNo{display: none;}
        .start{
            cursor: pointer;
            font-family: "微软雅黑";
            font-size: 18px;color: #999;
        }
    </style>
    <script type="text/javascript">
        function start(ele,that){
            var starts = $('.'+ele);
            var x = $(starts).index(that)
            starts.css("color","#999");
            for(var i =0 ;i<=x;i++){
                starts.eq(i).css("color","#ff9800")
            }
        }
    </script>                    
    <!--评分end-->

    可以复制到页面看看效果,如果有多个评分,js一个就够了,在传人参数时只要保证第一个参数传人的不同就可以了,相信你会喜欢的

  • 相关阅读:
    java web分页查询初试
    SQL注入原理深度解析
    JS 清除IE缓存
    Android 代码混淆及第三方jar包不被混淆
    [leetcode]Unique Paths II
    ffmpeg API录制rtsp视频流
    HDU 2045 不容易系列之(3)—— LELE的RPG难题
    Ffmpeg和SDL创建线程(转)
    “富豪相亲大会”究竟迷失了什么?
    Ffmpeg和SDL如何同步视频(转)
  • 原文地址:https://www.cnblogs.com/chengjunL/p/6096599.html
Copyright © 2011-2022 走看看