前端课上作业 日历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
    *{
        margin:0 ;
        padding:0;
    }
        .box{
            line-height:40px;
            font-size:16px;
            text-align:center;
            width: 280px;
            height: 320px;
            border:1px solid #ccc;
            position:absolute;
            top: 200px;
            left:200px;
            color:#000;
            padding:20px;
        }
        .top{
            font-size:0;
        }
        .top button{
            width: 25%;
            display:inline-block;
            font-size:16px;
        }
        .top #month{
            width: 50%;
            display:inline-block;
            font-size:16px;
        }
        .evrday{
            width: 40px;
            height: 40px;
            float:left;
        }
    </style>
</head>
<body>

    <div class="box">
      <div class="top">
        <button type="button" οnclick="prev()">上个月</button>
        <div id="month"></div>
        <button type="button" οnclick="next()">下个月</button>
      </div>
      <div class="week">
          <div class="evrday">日</div>
          <div class="evrday">一</div>
          <div class="evrday">二</div>
          <div class="evrday">三</div>
          <div class="evrday">四</div>
          <div class="evrday">五</div>
          <div class="evrday">六</div>
      </div>
      <div id="day"></div>
    </div>
    <script>

        var today=new Date();

        var year=today.getFullYear();

        var month=today.getMonth()+1;

        var day=today.getDate();

        var allday=0;

        // var now=today.getDay();

        // console.log(now)

        console.log(today);

        console.log(year);

        console.log(month);

        console.log(day);

        count();

        showmonth();

 function count () {
        if (month !=2){
            allday = 31

            if (month == 4 || month == 6 || month == 9 || month == 11){
                allday = 30

            }

        } else {
            if((year%4==0&&year%100!=0) || (year%400==0)){
                day = 29

            }else{
            allday = 28

        }

}

    }

function showmonth(){
    if(month < 10){
      var year_month = year+" 年 "+"0" + month+" 月 ";

    }else{
      var year_month = year+" 年 "+month+" 月 ";

    }

    document.getElementById("month").innerHTML=year_month;

}
showday();
function showday(){
            showmonth();

            count();

            var firstdate=new Date(year,month-1,1);

            var xingqi=firstdate.getDay();

            console.log(xingqi);

            var daterow=document.getElementById("day");

            for(var i=0;i<xingqi;i++){
                var dayElement=document.createElement("div");

                dayElement.className="evrday";

                daterow.appendChild(dayElement);

            }

            for(var j=1;j<=allday;j++){
                var dayElement=document.createElement("div");

                if(j<10){
                    dayElement.innerHTML="0"+j;

                }else{
                    dayElement.innerHTML=j;

                }

                dayElement.className="evrday";

                if(j==day)

                    dayElement.style.color="red";

                daterow.appendChild(dayElement);

            }

         }
function next(){
    document.getElementById("day").innerHTML="";
    if(month<12){
      month+=1;
    }else{
        year+=1;
        month=1;
    }

    showday();
}
function prev(){
    document.getElementById("day").innerHTML="";
    if(month>1){
      month-=1;
    }else{
        month=12;
        year-=1;
    }

    showday();
}

         console.log(allday);

    </script>

</body>
</html>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值