JavaScript实现简易日历效果

JavaScript学习记录

利用JavaScript实现简易日历


<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;ifunction()
        {
      
            for(var j=0;j'';
            }
            this.className='active';
            oTxt.innerHTML='

 '+(this.index+1)+'月活动

  玩......

'
; }; } }; script> head> <body> <div id="tab" class="calendar"> <ul> <li class="active"><h2>1h2><p>JANp>li> <li><h2>2h2><p>FERp>li> <li><h2>3h2><p>MARp>li> <li><h2>4h2><p>APRp>li> <li><h2>5h2><p>MAYp>li> <li><h2>6h2><p>JUNp>li> <li><h2>7h2><p>JULp>li> <li><h2>8h2><p>AUGp>li> <li><h2>9h2><p>SEPp>li> <li><h2>10h2><p>OCTp>li> <li><h2>11h2><p>NOVp>li> <li><h2>12h2><p>DECp>li> ul> <div class="text"> <h2> 1月活动h2> <p>  玩......p> div> div> body> html>

效果:
JavaScript实现简易日历效果_第1张图片

你可能感兴趣的:(javascript,javascript)