• 星星评分js代码


    演示地址:http://www.17sucai.com/pins/demoshow/110

    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>js星级评分点击星级评论打分效果</title>
    <meta name="description" content="js星级评论打分系统,制作鼠标滑过星级提示星级描述,点击星级评论打分效果。js代码">

    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    body{color:#666;font:12px/1.5 Arial;}
    /* star */
    #star{position:relative;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;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;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;}
    </style>

    <script type="text/javascript">
    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" : "";
    }

    };
    </script>
    </head>
    <body>

    <div id="star">
    <span>js星级评论打分</span>
    <ul>
    <li class=""><a href="javascript:;">1</a></li>
    <li class=""><a href="javascript:;">2</a></li>
    <li class=""><a href="javascript:;">3</a></li>
    <li class=""><a href="javascript:;">4</a></li>
    <li class=""><a href="javascript:;">5</a></li>
    </ul>
    <span></span>
    <p style="display: none; left: 12px;"><em><b>1</b> 分 很不满意</em>差得太离谱,与卖家描述的严重不符,非常不满</p>
    </div><!--star end-->

    </body></html>

  • 相关阅读:
    关于使用AJAX获取数据时,由于IE缓存而导致数据不更新,串数据的问题!
    优化PHP代码的40条建议(转)
    这么晚了!难得今天看了几个小时的JAVA
    WEB开发,路漫漫其修远兮,个人的求索思考
    (转)高效的MySQL分页
    20121108随笔,关于代码严谨性、编写的优雅性
    Ubuntu 12.04LTS 安装PHP扩展pdo_oci.so支持ORACLE数据库
    程序员应该具备的11项基本技能
    Windows下配置使用MemCached
    PHP浮点数比较
  • 原文地址:https://www.cnblogs.com/anyaran/p/3517341.html
Copyright © 2020-2023  润新知