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>
  • 相关阅读:
    intel 1211网卡驱动
    winform 右侧关闭按钮事件
    base64 教程
    js 预览图片 转base64
    docker常用命令
    docker安装
    jenkins集成sonar
    jenkins自动打包部署linux
    mac生成ssh公私匙
    jenkins统计单元测试的覆盖率
  • 原文地址:https://www.cnblogs.com/busicu/p/4210583.html
Copyright © 2011-2022 走看看