簡易年曆卡

簡易年曆卡

原創

2020-02-22 11:22

<!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.οnlοad=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].οnmοuseοver=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>