js实现日历卡

Posted 2020-08-07 小极客

效果图如下

 

首先先添加简单的样式

<style type="text/css">
*{padding:0;margin:0;}
    #tab {
        margin:0 auto;
        width:205px;
        height:335px;
        background:#e8e8e5;
    }
    #tab li{
           width:50px;
           height:50px;
           background:#40403f;
           float:left;
           list-style:none;
           margin-left:12px;
           margin-top:10px;
           text-align:center;
           font-size:12px;
           color:white;
           line-height:25px;
           font-weight:700;
           border:1px solid #40403f;

    }
    #tab #text{
        width:178px;
        height:70px;
        border:1px white solid;
        background:#f0f0ef;
        float:left;
        position:relative;
        top:10px;
        left:12px;
    }
    #tab #text h2{
        margin-left:5px;
        margin-top:5px;
        font-size:16px;
        color:#4c4c4b;
    }
    #tab #text p{
        margin-left:5px;
        margin-top:5px;
        font-size:12px;
        color:#80807f;
    }
    #tab .active{
        color:#db6082;
        background:white;
        
    }
</style>


<div id="tab" clss="calendar"> 
    <ul>
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    <div id="text">
        
    </div>
</div>

思路是通过一个循环，当鼠标移到每个方框，显示出不同的内容并且样式改变

当移到每个方框，先清除每个li的样式，以后个你鼠标在的li给给classname就可以，

内容可以用innerhtml

js代码如下

<script>
    window.onload=function()
    {
        var tab=document.getElementById("tab");
        var li=tab.getElementsByTagName("li");
        var text1=document.getElementById("text");
        // var p=text1.getElementsByTagName("p")[0];
        // var h2=text1.getElementsByTagName("h2")[0];
        var text=[\'快过年了，大家可以商量着去哪里玩吧!\',
                  \'寒假快结束了，是该时候写作业了\',
                  \'开学季了\',
                  \'四月是谈恋爱的季节.\',
                  \'love\',
                  \'you\',
                  \'forever\',
                  \'and\',
                  \'alongside\',
                  \'all\',
                  \'day\',
                 ]
        for(var i=0;i<li.length;i++)
        {
            li[i].index=i;
            li[i].onmouseover= function()
            {   
                  for(var i=0;i<li.length;i++)
                  {
                    li[i].className="";
                  }
                  this.className="active";
                  text1.innerHTML= \'<h2>\'+(this.index+1)+\'月活动</h2><p>\'+text[this.index]+\'</p>\';

            };
        }
       
    }
</script>

　　

　其实实现很简单，可以自己试着写，然后看看这代码