I am in a C language group, see they wrote a calendar production, I also had a whim, also use the front end to make a calendar

HTML part

 <div id='data'>
        <p>
            <span id="prev">On January</span>
            <span id="nian">2022</span>
            <span id="next">Next month</span>
        </p>
        <h5 id="yue">June</h5>
        <ul id="title">
            <li>day</li>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
        </ul>
        <ul id="date"></ul>
    </div>
Copy the code

The CSS part

<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: #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>
Copy the code

JavaScript part

支那<script>
        var date = new Date; The global variable gets the default time object
        add(); // Manual calls render for the first time
        function add() {
            var cYear = date.getFullYear(); // Get the current year
            var cMonth = date.getMonth(); // Get the current month
            var cDay = date.getDate(); // Get the current day
            var zhou = new Date(cYear, cMonth, 1).getDay(); // Get the first day of the month
            // Get the number of days per month
            var days = new Date(cYear, cMonth + 1, -1).getDate() + 1;
            var arr = ['一月'.'二月'.'march'.'in April'.'may'.'June'.'July'.'August'.'September'.'October'.November.December]; // Create an array month
            document.getElementById('nian').innerHTML = cYear; // Get the current year
            document.getElementById('yue').innerHTML = arr[cMonth] // Get the month
                //
            var html = ' ';
            for (var i = 0; i < zhou; i++) { // Number of days per week
                html += '<li></li>'; // Get the output whitespace down
            }
            for (var i = 1; i < days + 1; i++) { // Number of days per month
                console.log(i);
                if (i == cDay) {
                    html += '<li class="active">' + i + '</li>';
                } else {
                    html += '<li class="hover">' + i + '</li>'; }}document.getElementById('date').innerHTML = html;
        }
        // Events were added last month
        document.getElementById('prev').onclick = function() {
            date.setMonth(date.getMonth() - 1); // Get the month's events
            add();
        };
        // Add events for the next month
        document.getElementById('next').onclick = function() {
                date.setMonth(date.getMonth() + 1);
                add();
            }
            // Count down the days
            // function countDown(time) {
            // var nowTime = +new Date();
            // var inputTime = +new Date(time);
            // var times = (time - nowTime) / 1000;
            // var d = parseInt(time / 60 / 60 / 24);
            // var h = parseInt(time / 60 / 60 % 24);
            // var m = parseInt(time / 60 % 60);
            // var s = parseInt(time % 60);
            / /}
            // console.log(countDown('2021-10-8 18:00:00'));
            // var date = new Date()
            // document.writeln(date)
            //
    </script>支那Copy the code

I wanted to add a countdown to the number of years, but I don’t have time to wait, so I will write here when I have time