js 日历

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        #data{
            width: 280px;
            border: 1px solid #000;
            margin: 20px auto;
        }

        #data p{
            display: flex;
        }

        #data > h5 {
            text-align: center;
        }

        #data > p > span{
            padding: 0 10px;
        }

        #prev,#next{
            cursor: pointer;
        }
        #nian{
            flex: 1;
            text-align: center;
        } 
        #title{
            overflow: hidden;
            list-style: none;
            background-color: #ccc;
        }

        #title > li{
            float: left;
            width: 40px;
            height: 26px;
            line-height: 26px;
            text-align: center;
        }
        #date{
            overflow: hidden;
            list-style: none;
        } 
        #date > li {
            float: left;
            width: 34px;
            height: 34px;
            margin: 1px 1px;
            border: 2px solid rgba(0,0,0,0);
            line-height: 34px;
            text-align: center;
            cursor: pointer;
        }

        #date > .hover:hover{
            border: 2px solid red;
        }

        .active{
            color: red;
        }
    </style>
</head>
<body>
   <div id="data">
       <p>
           <span id="prev">上一月</span>
           <span id="nian">2022</span>
           <span id="next">下一月</span>
       </p>

       <h5 id="yue"> 五月</h5>

       <ul id="title">
           <li>日</li>
           <li>一</li>
           <li>二</li>
           <li>三</li>
           <li>四</li>
           <li>五</li>
           <li>六</li>
       </ul>

       <ul id="date"></ul>

   </div> 

   <script>
      var date = new Date(); // 获取时间对象
       add();

       function add(){ 
         var cYear = date.getFullYear(); // 获取年份
         var cMonth = date.getMonth(); // 获取月份 0-11 
         var cDay = date.getDate();  // 获取当前的天
 
         // 每个月的第一天是周几
         var zhou = new Date(cYear,cMonth,1).getDay()
         // 获取每个月的天数 
         var days = new Date(cYear,cMonth + 1, -1).getDate() + 1


         var arr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']

         document.getElementById('nian').innerHTML = cYear;
         document.getElementById('yue').innerHTML = arr[cMonth];

         var html = '';

         for(var i=0;i<zhou;i++){
            html +='<li></li>'
         }

         for(var i=1;i<=days;i++){
             if(i == cDay){
                html +='<li class="active">' + i + '</li>'
             }else{
                html +='<li class="hover">' + i + '</li>'
             } 
         }

         document.getElementById('date').innerHTML = html
       }


       document.getElementById('prev').onclick=function(){
         date.setMonth(date.getMonth() - 1)
         add()
       }

       document.getElementById('next').onclick=function(){
        date.setMonth(date.getMonth() + 1)
        add()
       }

   </script>
</body>
</html>
posted @ 2021-01-23 14:08  13522679763-任国强  阅读(94)  评论(0)    收藏  举报