javascript简易日历

最新推荐文章于 2022-11-22 03:43:31 发布

回_憶

最新推荐文章于 2022-11-22 03:43:31 发布

阅读量668

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/angjunqiang/article/details/41701175

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
    <title>Calendar</title>
<script>
window.οnlοad=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.οnclick=function(){
                 var year=oYear.value;
                 var month=oMonth.value;
                 oCalendar.innerHTML="";
                 calendar(oCalendar,year,month,1);
         }
    //今天
    document.getElementById('btn1').οnclick=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].οnmοuseοver=function(){
           this.style.background='gray';
       }
       oDivs[k].οnmοuseοut=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>