简易年历卡

最新推荐文章于 2024-10-12 07:46:51 发布

原创最新推荐文章于 2024-10-12 07:46:51 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

15 篇文章

订阅专栏

简易年历卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>年历</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;list-style: none;box-sizing: border-box;}
        #div1{
            width: 240PX;height: 440PX;background: #CCC;margin: 40px auto;padding:20px 10px 20px 20px;
        }
        #div1 ul{
            /*border: 1px solid red;*/
            display: inline-block;
            width: 210px;
        }
        li{
            float: left;width: 60px;height: 60px;text-align: center;cursor: pointer;/*border: 1px solid red;*/background: rgba(0,0,0,0.7);color: #fff;margin-right: 10px;margin-bottom: 10px;
        }
        #div1 div{
            width: 200px;height: 120px;background: rgba(234,234,234,1);padding: 10px;
        }
        h4{
            margin-bottom: 5px;
        }
        .active{
            background: #fff;
            color: red;
            border: 1px solid block;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv1 = document.getElementById('div1');
            var aLi = oDiv1.getElementsByTagName('li');
            var aDiv = oDiv1.getElementsByTagName('div')[0];
            var arrMon=['快过年了，大家可以商量着去哪玩啦。','过年吃饺子贴年画唠','元宵放孔明灯，烟花爆竹，开始上班了','清明节到了，去看老友了','端午节6起来','毕业季','七夕情人节','八月十五什么节来着','秋天来了,寒霜降临','要下雪了','要放寒假了','冬天真漂亮']
            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].onmouseover=function(){
                    for(var j=0;j<aLi.length;j++){
                    aLi[j].className = '';
                }
                    this.className = 'active';
                    aDiv.innerHTML='<h4>'+(this.index+1)+
                    '月活动</h4><p>'+arrMon[this.index]+'</p>';
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>1<br>JAN</li>
            <li>2<br>FER</li>
            <li>3<br>MAR</li>
            <li>4<br>APR</li>
            <li>5<br>JAN</li>
            <li>6<br>MAY</li>
            <li>7<br>JUN</li>
            <li>8<br>JUL</li>
            <li>9<br>AUG</li>
            <li>10<br>SEP</li>
            <li>11<br>OCT</li>
            <li>12<br>FER</li>
        </ul>
        <div >
        <h4>1月活动</h4>
        <p>快过年了，大家可以商量着去哪玩啦。</p>
        </div>
    </div>
</body>
</html>