百度音乐全选

最新推荐文章于 2024-05-21 14:15:14 发布

weixin_34044273

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mayufo/p/4173960.html

版权

<!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>

转载于:https://www.cnblogs.com/mayufo/p/4173960.html

weixin_34044273

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度音乐全选

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0px; padding:0px; }#wrap{ width:400p...
复制链接

扫一扫