zoukankan      html  css  js  c++  java
  • 星级评价

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>星级评价</title>
        <style type="text/css">
            .star{padding: 0; margin:0;}
            .star em{ width: 27px; height: 27px; background: url(star.gif) no-repeat top left;float:left;}
            .star em.color{ background: url(star.gif) no-repeat bottom left; }
            .star span{padding-left: 5px; line-height: 30px;}
        </style>
    </head>
    <body>
    <div id="star" class="star">
        <em mytitle="很差"></em>
        <em mytitle="差"></em>
        <em mytitle="中"></em>
        <em mytitle="好"></em>
        <em mytitle="很好"></em>
        <span></span>
    </div>
    </body>
    </html>
    <script>
    
    var oDiv=document.getElementById("star");
    var aEm=oDiv.getElementsByTagName("em");
    var result=oDiv.getElementsByTagName("span")[0];
    for (var i = 0; i < aEm.length; i++) {
        aEm[i].index=i;
        aEm[i].onmouseover=function(){
        for (var i = 0; i < aEm.length; i++) {
            if(i<=this.index){
                aEm[i].className="color"
            }else{
                aEm[i].className=""
            }
        }
            result.innerHTML=this.getAttribute("mytitle");
        }
    };
    
    </script>
  • 相关阅读:
    贪心算法1000
    贪心算法1006
    1012
    贪心算法1016
    贪心算法1001
    贪心算法1004
    Java作业1
    指针数组与数组指针的区别
    Java 中对类进行排序的方法(转)
    java习题1
  • 原文地址:https://www.cnblogs.com/busicu/p/4210583.html
Copyright © 2011-2022 走看看