H5中利用js实习简易日历效果

来源：互联网发布：mac android ndk 下载编辑：程序博客网时间：2024/05/22 03:13
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*div{*/            /*width: 200px;*/            /*height: 200px;*/            /*border: 1px solid black;*/        /*}*/        *{            margin: 0;            padding: 0;        }        .content{            width: 300px;            height: 500px;            background:#EAE9E9;            margin: 20px auto;        }        .content_top{            width: 260px;            height: 350px;            margin: 10px auto;        }        .content_bottom{            width: 260px;            margin: 0 auto;            height: 120px;            background: #F1F1F1;            padding-top: 10px;        }        li{            list-style: none;            width: 60px;            height: 60px;            margin: 13px;            background: #3A3A3A;            line-height: 60px;            text-align: center;            float: left;            color: white;        }        .active{            background: white;            color: black;        }    </style>    <script>//        window.onload=function () {//            var oTxt=document.getElementById('txt1');//            var oBtn=document.getElementById('but1');//            var oDv=document.getElementById('div1');//            oBtn.onclick=function () {//                oDv.innerHTML=oTxt.value;//            }//        }        window.onload=function () {            var arr=[                '1月打泡泡',                '2月打泡泡',                '3月打泡泡',                '4月打泡泡',                '5月打泡泡',                '6月打泡泡',                '7月打泡泡',                '8月打泡泡',                '9月打泡泡',                '10月打泡泡',                '11月打泡泡',                '12月打泡泡',            ];            var oDiv=document.getElementById('tab');            var aLi=oDiv.getElementsByTagName('li');            var oTxt=oDiv.getElementsByTagName('div')[0];            for (var i=0;i<aLi.length;i++){                aLi[i].index=i;                aLi[i].onmousemove=function () {                    for(var i = 0; i < aLi.length; i++){                        aLi[i].className='';                    }                    this.className='active';                    oTxt.innerHTML='<h3>'+(this.index+1)+'月活动</h3><p>'+arr[this.index]+'</p>';                };            }        }    </script></head><body><!--<input type="text" id="txt1"/>--><!--<input type="button" id="but1" value="改变文字" />--><!--<div id="div1">--><!--</div>--><div class="content">    <div class="content_top" id="tab">        <ul>            <li class="active">1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>            <li>6</li>            <li>7</li>            <li>8</li>            <li>9</li>            <li>10</li>            <li>11</li>            <li>12</li>        </ul>    <div class="content_bottom">        <h3>1月活动</h3>        <p>快过年了，大家商量着去哪玩</p>    </div>    </div></div></body></html>
效果图展示：
1 0