js day15 案例02

1.图片切换

css样式

<style type="text/css">
            *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            li{
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            .container{
                width:600px;
                margin:0 auto;
                border:1px solid #000;
            }
            .container>ul{
                overflow: hidden;
            }
            .container>ul>li{
                float:left;
            }
            .main>img{
                width:400px;
                height:400px;
            }
</style>

div

<div class='container'>
    <ul>
        <li>
            <a href="#">
                <img src="img/home1.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home2.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home3.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/home0.jpg">
            </a>
        </li>
    </ul>
    <div class='main'>
        <img src="img/home1.jpg">
    </div>
</div>

script

<script type="text/javascript">
            var img=document.querySelectorAll('.container>ul>li>a>img');
            console.log(img);
            var mainImg=document.querySelector('.main>img');
            console.log(mainImg);
            for(var i=0;i<img.length;i++){
                img[i].onclick=function(){
                    mainImg.src=this.src;
                }
            }
</script>

2.树形列表

css属性

div{float:left; height: 100px; line-height: 100px; }
#d1,#d3{ background-color: #ccff00; }
#d2{ cursor: pointer; background-color: #ffcc00; }

div

<div id="d1">树形列表</div>
<div id="d2">&lt;&lt;</div>
<div id="d3">内容的主体</div>

script

var d1=document.getElementById('d1');
var d2=document.getElementById('d2');
var d3=document.getElementById('d3');
d2.onclick=function(){
    if(d2.innerHTML=='<<'){
        d1.style.display='none';
        d2.innerHTML='>>';
    }else{
        d1.style.display='block';
        d2.innerHTML='<<'
    }
}

3.万年历

css样式

*{
    margin:0;
    padding:0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
div{
    width:250px;
    margin:0 auto;
    background: #EAEAEA;
    padding:10px;
}
ul{
    overflow: hidden;
}
ul>li{
    width:50px;
    height:50px;
    background: #000;
    color:#fff;
    float:left;
    margin-top: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding-top:10px;
}
ul>li>b{
    display: inline-block;
    width:30px;
}
ul>li>p>b{
    display: inline-block;
    width:228px;
}
div>p{
width:228px;
    height
    margin:0 auto;
    border:1px solid #fff;
    background: #F1F1F1;
    margin-top:5px;
}
ul>li>p{
    display: none;
}

.active{
    background: red;
}

div

<div>
       <ul>
          <li>
             <b>1</b>JAN
             <p><b>1月节日</b>元旦:1月1日至3日放假3天</p>
          </li>
          <li>
             <b>2</b>FEB
             <p><b>2月节日</b>春节:2月2日至8日放假7天</p>
          </li>
          <li>
             <b>3</b>MAR
             <p><b>3月节日</b>妇女节:3月8日妇女节，与你们无关</p>
          </li>
          <li>
             <b>4</b>APR
             <p><b>4月节日</b>清明:4月3日至5日放假3天</p>
          </li>
          <li>
             <b>1</b>JAN
             <p><b>5月节日</b>劳动节:4月30日至5月2日放假3天</p>
          </li>
          <li>
             <b>2</b>FEB
             <p><b>6月节日</b>端午节:6月4日至6日放假3天</p>
          </li>
          <li>
             <b>3</b>MAR
             <p><b>7月节日</b>小暑:7月7日小暑，不放假</p>
          </li>
          <li>
             <b>4</b>APR
             <p><b>8月节日</b>七夕节:8月6日七夕节,不放假</p>
          </li>
          <li>
             <b>1</b>JAN
             <p><b>9月节日</b>中秋节:9月10日至12日放假3天</p>
          </li>
          <li>
             <b>2</b>FEB
             <p><b>9月节日</b>国庆节:10月1日至7日放假7天</p>
          </li>
          <li>
             <b>3</b>MAR
             <p><b>11月节日</b>立冬:11月8日立冬。不放假</p>
          </li>
          <li>
             <b>4</b>APR
             <p><b>12月节日</b>艾滋病日:12月1日</p>
          </li>
    
       </ul>
       <p></p>
    </div>  

script

<script type="text/javascript">

        var li=document.querySelectorAll('div>ul>li');
for(var i=0;i<li.length;i++){
    li[i].index = i;
    li[i].onclick = function(){
        alert(this.index);
        if(this.classList[0] != "active"){
            this.classList.add("active");
        }else{
            this.classList.remove("active");
        }
    }

}

        var p=document.querySelector('div>p');
        console.log(p);
        for(var i=0;i<li.length;i++){
            li[i].onmouseover=function(){
                this.style.background='#fff';
                this.style.color='#f00';
                console.log(this.children[1]);
                p.innerHTML=this.children[1].innerHTML;
            }
            li[i].onmouseout=function(){
                this.style.background='#000';
                this.style.color='#fff';
                p.innerHTML='';
            }
        }
    </script>