JavaScript实现简易日历效果

来源：互联网发布：东华软件西安分公司编辑：程序博客网时间：2024/05/22 07:04

JavaScript学习记录

利用JavaScript实现简易日历

<!doctype html><html><head><meta charset="UTF-8"><title>日历</title><style>#tab .active{background:white;color:red;}#tab{width:350px;height:600px;background:#CCCACA;margin:0 auto;border:5px solid #CCCACA}#tab li{width:80px;height:90px;border: 1px solid black;display:inline-table;margin:5px;text-align:center;background:#282828;color:white;}#tab ul{width:auto;height:auto;}#tab div{margin:0 auto;border:1px solid black;}#tab .text{background:#E1E0E0;border:2px solid #EAE9E9}</style><script>window.onload=function (){    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].onmouseover=function()        {            for(var j=0;j<aLi.length;j++)            {                aLi[j].className='';            }            this.className='active';            oTxt.innerHTML='<h2>&nbsp'+(this.index+1)+'月活动</h2><p>&nbsp;&nbsp;玩......</p>';        };    }};</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>&nbsp;1月活动</h2>   <p>&nbsp;&nbsp;玩......</p></div></div></body></html>

效果：
这里写图片描述

阅读全文

0 0