javascript简易日历

谁借莪１个温暖的怀抱￠ 2022-08-05 19:30 183阅读 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>

![Center][]

[Center]: /images/20220806/d24a0141ac894efbb4c8c776d5ca06c9.png