JS,CSS HTML 简单开心日历


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html,body,table,tr,th,td{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    body{
        position: relative;
    }
    .table{
        width: 500px;
        height: 500px;
        position: absolute;
        top:calc(50% - 250px);
        left:calc(50% - 250px);
        box-shadow: -1px 20px 20px 5px  #dbdbdb;
    }
    .title,.yearMonth{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .yearMonth{
        flex-direction: column;
    }
    .body,table{
        width: 100%;
        border-spacing:0;
    }
    .body>table  .t_title{
        background-color: #dbdbdb;
    }
    th{
        padding: 10px;
        border-bottom: #888888 1px solid;
        border-right: #888888 1px solid;
        border-radius: 5px ;
    }
    td{
        text-align: center;
        cursor: pointer;
        padding: 15px;
        border-bottom: grey 1px solid;
        border-right: grey 1px solid;
        border-radius: 0 0 5px 5px;
        transition: all 1s;
        font-size: 20px;
    }
    td:hover{
        background-color: darkred;
        color: white;
        box-shadow: 10px 10px 10px #888888;
    }
    .proMonth,.nextMonth{
        transition: all 1s;
        cursor: pointer;
        padding: 10px;
        margin: 5px;
        font-weight: bold;
    }
    .proMonth:hover{
        background-color: darkred;
        color: white;
        border-radius: 5px;
    }
    .nextMonth:hover{
        background-color: darkred;
        color: white;
        border-radius: 5px;
    }
    .footer{
        display: flex;
        justify-content: end;
        flex-direction: column;
        align-items: center;
        font-size: 30px;
        font-weight: bold;
        overflow: hidden;
        padding: 10px;
    }
    i{
        background: none;
        transition: all 0.3s ease;
        cursor: pointer;
        font-style:normal
    }
    i:hover{
        font-size: 40px;
        color: brown;
        text-shadow: -10px 5px 10px #888888;
    }
    i::after{
        display: block;
        /*内容为空*/
        content: "";
        /*线高度*/
        height: 2px;
        background: brown ;
        transition: all 0.5s ease;
        /*水平划线0*/
        transform: scaleX(0);
        box-shadow: -10px 5px 10px #888888;
    }
    i:hover::after{
        transform: scaleX(1.5);
    }
    .nowDay{
        color: red;
        background-color: antiquewhite;
    }
</style>
<body>
<div class="table">
    <div class="title">
          <div class="proMonth" id="proMonth">上一月</div>
          <div class="yearMonth" id="yearMonth">
              <div class="year" id="year">2021</div>
              <div class="month" id="month">12月</div>
          </div>
          <div class="nextMonth" id="nextMonth">下一月</div>
    </div>
    <div class="body">
        <table>
            <tr class="t_title" id="t_title">
            </tr>
            <tbody id="t_body">
            </tbody>
        </table>
    </div>
    <div class="footer">
        <i>
            开心日历
        </i>
    </div>
</div>
<script>
    var date =new Date();
    var nowY = year =date.getFullYear();//年
    var nowM = month =date.getMonth();//月
    var day =date.getDate();//日
    var t_title=  document.getElementById("t_title");
    var proMonth=  document.getElementById("proMonth");
    var nextMonth=  document.getElementById("nextMonth");
    var monthElement=  document.getElementById("month");
    var yearElement=  document.getElementById("year");
    var changeNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九','十','十一','十二'];
    monthElement.innerText=changeNum[month]+'月';
    yearElement.innerText=year+'年';
    var t_body=  document.getElementById("t_body");
    var week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    var str=""
    week.forEach(function (v) {
        str +="<th>"+v+"</th>";
    });
    month +=1;
    nowM +=1;
    //追加星期抬头
    t_title.innerHTML=str;
    var weekDay =week[date.getDay()];
    var string = "<tr>";
    var lastDay= new Date(year, month, 0).getDate();//最后一天--总计天数
    var firstDayOfWeek =new Date(month+"/1/"+year).getDay(); //每月第一天周几
    myInnerHtml();
    // 上一月
    proMonth.onclick=function () {
        string = "<tr>";
        if(month-1===0){
            year -=1;
            month =12;
            yearElement.innerText=year+'年';
        }else{
            month -=1;
        }
        myInnerHtml()
    }
    // 下一月
    nextMonth.onclick=function () {
        string = "<tr>";
        if(month+1===13){
            year +=1;
            month =1;
            yearElement.innerText=year+'年';
        }else{
            month +=1;
        }
        myInnerHtml()
    }
    // 填充tbody的天数
    function myInnerHtml() {
        monthElement.innerText=changeNum[month-1]+'月';
        lastDay= new Date(year, month, 0).getDate();////最后一天--总计天数
        firstDayOfWeek =new Date(month+"/1/"+year).getDay();//每月第一天周几
        for(var i =1;i<=firstDayOfWeek;i++){
            string += "<td></td>"
        }
        for(var i =1;i<=lastDay;i++){
            var std="<td>";
            var etd="</td>";
            if(i===day && nowY === year && nowM === month ){
                std="<td class='nowDay'>"
            }
            if((i+firstDayOfWeek)%7==0){
                string += std+i+ etd +"</tr><tr>";
            }else {
                string += std+i+ etd  ;
            }
        }
        t_body.innerHTML=string
    }
</script>
</body>
</html>
相关文章
