学习制作简单的日历

制作简单的日历

html片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    <link href="css/rl_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/rl.js">
</script>
</head>

<body>

<div id="tab" class="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 class="text">
        <h2><font face="微软雅黑">1月</font></h2>
        <p>一月幸运花---报春花,一月是美好的新开始,从此刻开始努力吧~</p>
    </div>

</div>

</body>

</html>

css片段

@charset "utf-8";

* { padding: 0; margin: 0; }
li { list-style: none; }
body {font-family: arial; background: url(../img/z.jpg) }
#tab{
    float: right;
}
.calendar {height: 530px; width: 300px; margin: 0 auto; padding: 10px 10px 20px 20px; background:     #FFC0CB; }
.calendar ul {height: 400px; width: 300px; overflow: hidden; padding-bottom: 10px;float: left; }
.calendar li {height: 300px; float: left; width: 75px; height: 84px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #6495ED; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 25px; padding-top: 5px; }
.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background:     #FFFFFF; color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }

.calendar .text { width: 260px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background:#AFEEEE; color: #555; }
.calendar .text h2 {font-size: 18px; margin-bottom: 8px; }
.calendar .text p { font-size: 16px; line-height: 18px; }

js片段

var aInnerText=
[
    "一月幸运花---报春花,一月是美好的新开始,从此刻开始努力吧~",
    "二月幸运花---香水紫罗兰,二月的草绿绿的,适合郊外出行哦~",
    "三月幸运花---勿忘我,三月的你在哪儿呢,在草丛里还是花枝上?",
    "四月幸运花---郁金香,芳香的一天,一起去骑单车吧!",
    "五月幸运花---苜蓿草(又称四叶幸运草)五月的你是幸运的吗……?",
    "六月幸运花---香豌豆",
    "七月幸运花---洋苏草",
    "八月幸运花---百合",
    "九月幸运花---香水矢水菊",
    "十月幸运花---大波斯菊",
    "十一月幸运花---雏菊",
    "十二月幸运花---风信子 ,十二月是结束的一月,把所有开心和不开心的事儿都忘掉吧!重新开始你的新旅程~",
];

window.onload=function ()
{
    var oDiv=document.getElementById('tab');
    var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var i=0;
    
    for(i=0;i<aLiBtn.length;i++)
    {
        aLiBtn[i].onmouseover=select;
    }
};

function select()
{
    var oDiv=document.getElementById('tab');
    var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var oDivContent=oDiv.getElementsByTagName('div')[0];
    var sInnterHtml='';
    var i=0;
    
    for(i=0;i<aLiBtn.length;i++)        //for循环遍历
    {
        aLiBtn[i].className='';
    }
    
    for(i=0;i<aLiBtn.length;i++)
    {
        if(aLiBtn[i] === this)    //this的序号是i
        {
            aLiBtn[i].className='active';
            
            //修改有关下部份的文字
            sInnterHtml="<h2>" + (i+1) + "月活动</h2>";
            sInnterHtml+="<p>" + aInnerText[i] + "</p>";
            
            oDivContent.innerHTML=sInnterHtml;
        }
    }
}

结果显示

图片.gif
图片.gif

添加新评论

评论列表