javascript简易日历

来源：互联网发布：淘宝销量代码编辑：程序博客网时间：2024/05/17 21:43
<!DOCTYPE html><html><meta charset="UTF-8"><head>    <title>Calendar</title><script>window.onload=function(){var oCalendar=document.getElementById('calendar');    calendar(oCalendar);  //初始化下拉框,刚刚开始显示当前系统日期  var oYear=document.getElementById('year');  var oMonth=document.getElementById('month');  for(var i=1;i<=12;i++){     var oOpt=document.createElement('option');     oOpt.innerHTML=i;     oMonth.appendChild(oOpt);  }  for(var i=2010;i<=2050;i++){          var oOpt=document.createElement('option');     oOpt.innerHTML=i;     oYear.appendChild(oOpt);  }  var date=new Date();  oYear.value=date.getFullYear();  oMonth.value=date.getMonth()+1;   //处理查询  var oBtn=document.getElementById('btn');         oBtn.onclick=function(){                 var year=oYear.value;                 var month=oMonth.value;                 oCalendar.innerHTML="";                 calendar(oCalendar,year,month,1);         }    //今天    document.getElementById('btn1').onclick=function(){          oCalendar.innerHTML="";          calendar(oCalendar);          oYear.value=new Date().getFullYear();          oMonth.value=new Date().getMonth()+1;    }    curTimer();    setInterval(curTimer,1000);};//显示时间function curTimer(){  var t=document.getElementById('timer');  var date=new Date();  var timer=formatStr(date.getHours())+":"+formatStr(date.getMinutes())+":"+formatStr(date.getSeconds());  t.innerHTML=timer;}//规范格式function formatStr(n){  if(n<10){    n='0'+n;  }else{    n=n+'';  }  return n;} function calendar(obj,year,month,type){  var date=new Date();    if(year == null ||month == null){      year=date.getFullYear();      month=date.getMonth()+1;    }    var day = new Date(year,month,0);//2014-12的最后一天；    var days_month=day.getDate();//获得12月的天数    day=new Date(year,month-1,1);//2014-12-1;    var day_week=day.getDay();//获得1号的星期    //加入星期    for(var k=0;k<7;k++){      var oDiv=document.createElement('div');      oDiv.className='week_day';      switch(k){        case 0:oDiv.innerHTML='日';        obj.appendChild(oDiv);        break;        case 1:oDiv.innerHTML='一';        obj.appendChild(oDiv);        break;        case 2:oDiv.innerHTML='二';        obj.appendChild(oDiv);        break;        case 3:oDiv.innerHTML='三';        obj.appendChild(oDiv);        break;        case 4:oDiv.innerHTML='四';        obj.appendChild(oDiv);        break;        case 5:oDiv.innerHTML='五';        obj.appendChild(oDiv);        break;        case 6:oDiv.innerHTML='六';        obj.appendChild(oDiv);        break;      }    }    //加入天数,并突出当前天    for(var i=0;i<day_week;i++){    var oDiv=document.createElement('div');      oDiv.className='day';      oDiv.innerHTML="";      obj.appendChild(oDiv);    }    for(var j=0;j<days_month;j++){       var oDiv=document.createElement('div');        oDiv.className='day';        if(!(type == 1)){           if((j+1) == date.getDate()){          oDiv.style="border-radius:30px;background:green;";         }        }        oDiv.innerHTML=(j+1);        obj.appendChild(oDiv);    }     //为每一天添加onmouseover与onmouseout事件    var oDivs=document.getElementById('calendar').getElementsByTagName('div');    for(var k=7;k<oDivs.length;k++){      var oldColor=oDivs[k].style.background;       oDivs[k].onmouseover=function(){           this.style.background='gray';       }       oDivs[k].onmouseout=function(){           this.style=oldColor;       }    }}</script><style type="text/css">*{margin: 0px;padding: 0px;}#search{width: 224px; position: absolute;margin: 100px 200px;border:1px solid green;border-radius: 20px;overflow: hidden;}#condition{width: 225px;height: 50px; position: relative;border-bottom: 1px solid green;}#calendar{width: 225px;height: 200px; position: relative;}#timer{width: 225px;height: 40px;border-top:1px solid green; text-align: center;line-height: 40px;font-size: 18px;font-weight: bold;background:#5E5E5E;color: blue;}.day{width: 32px;height: 30px;float: left;text-align: center;line-height: 30px;}.week_day{width: 32px;height: 30px;float: left;text-align: center;line-height: 30px;font-family: '宋体';font-weight: bold;background:#adceef;}#year,#month{width: 48px;height: 20px;text-align: center;margin-left: 5px;margin-top:15px; }#condition #month{width: 35px;}#btn1{width: 25px;text-align: center;text-decoration: none;font-family: '宋体';font-weight: bold;font-size: 12px;margin-left: 5px;}</style></head><body>        <div id="search">        <div id="condition">           <select id="year"></select>年           <select id="month"></select>月           <button id="btn">查询</button>           <a href="javascript:;" id="btn1">今天</a>        </div>        <div id="calendar"></div>        <div id="timer"></div>    </div></body></html>
0 0