首页 > 代码库 > 百度音乐全选

百度音乐全选

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{    margin:0px;    padding:0px;    }#wrap{    width:400px;    margin:20px auto;    border:1px #CCC solid;    }#wrap #list li{    height:30px;    width:100%;    list-style-type:none;    position:relative;    line-height:30px;    }#wrap #list input{    margin-left:10px;    }    .title{    position:absolute;    left:30px;    }.singer{    position:absolute;    right:35px;    }#control{    height:35px;    border-top:1px #CCCCCC solid;    border-bottom:2px #333333 solid;    }#control li{    width:100px;    float:left;    text-align:left;    list-style-type:none;    }#control li input{    margin-left:10px;    }    #control li span{    line-height:35px;    margin-left:5px;    }        #control div{    border:1px #CCC solid;    height:20px;    width:60px;    line-height:20px;    padding-left:10px;    text-align:center;    border-radius:5px;    margin:6px 5px;    font-size:12px;    opacity:0.3;    }#favorite{    background:url(img/favorite.gif) no-repeat 5px center;    }#add{    background:url(img/add.png) no-repeat 5px center;    }#del{    background:url(img/delete.png) no-repeat 5px center;    }                                 </style><script type="text/javascript">window.onload = function (){    var oull = document.getElementById(‘list‘);    var oli = oull.getElementsByTagName(‘li‘);    var oinput = oull.getElementsByTagName(‘input‘);        var oulc = document.getElementById(‘control‘);    var cdiv = oulc.getElementsByTagName(‘div‘);    var cinput = document.getElementById(‘allinput‘);        function jishu (a)    {         for( var i = 0; i < oli.length; i++)        {                        if(oinput[i].checked == true)                a++;                }        return a;    };            function hide()    {        for( var i = 0; i < oli.length; i++)        {            if( i % 2 == 0 )            { oli[i].style.background = ‘#F7FFFF‘; }            else             { oli[i].style.background = ‘#fff‘;    }            oinput[i].checked = false;        }        for( var i = 0; i < cdiv.length; i++)        {            cdiv[i].style.opacity = 0.3;        }    };        function show()    {                for( var i = 0; i < oli.length; i++)        {             oli[i].style.background = ‘#EEEEEE‘;          oinput[i].checked = true;        }        for( var i = 0; i < cdiv.length; i++)        {            cdiv[i].style.opacity = 1;        }    };            cinput.onclick = function ()    {        if(cinput.checked)        {            show();        }        else         {            hide();        }    };        for( var i = 0; i < oli.length; i++)    {        oli[i].index = i;        oli[i].onclick = function ()        {                        if(oinput[this.index].checked )            {                                this.style.background = ‘#EEEEEE‘;                for( var i = 0; i < cdiv.length; i++)                {                    cdiv[i].style.opacity = 1;                }                                if(jishu(0) == 6)                {                    cinput.checked = true;                }                            }            else            {                                if( this.index % 2 == 0 )                { this.style.background = ‘#F7FFFF‘; }                else                 { this.style.background = ‘#fff‘;    }                                if(jishu(0) == 0)                {                    for( var i = 0; i < cdiv.length; i++)                    {                        cdiv[i].style.opacity = 0.3;                    }                }            }                    };    }            };</script></head><body><div id="wrap">        <ul id="list">        <li>            <input type="checkbox">            <span class="title">私奔</span>            <span class="singer">梁博</span>        </li>        <li>            <input type="checkbox">            <span class="title">北京北京</span>            <span class="singer">梁博</span>        </li>        <li>            <input type="checkbox">            <span class="title">我爱你中华</span>            <span class="singer">梁博</span>        </li>        <li>            <input type="checkbox">            <span class="title">火花</span>            <span class="singer">梁博</span>        </li>        <li>            <input type="checkbox">            <span class="title">回来</span>            <span class="singer">梁博</span>        </li>        <li>            <input type="checkbox">            <span class="title">爱要有你才完美</span>            <span class="singer">梁博</span>        </li>    </ul>    <ul id="control">        <li>            <input id="allinput" type="checkbox">            <span>全选</span>        </li>        <li>            <div class="button" id="favorite">收藏</div>        </li>        <li>            <div class="button" id="add">增加</div>        </li>        <li>            <div class="button" id="del">删除</div>        </li>    </ul></div></body></html>

 

百度音乐全选