html日历的代码js

宋家德 2周前 16浏览 0评论

HTML日历是网页设计中非常常见的功能,它可以帮助用户方便地查看某一天的日期。在网页上使用HTML日历,需要使用JavaScript来实现日历的功能。

<script type="text/javascript">
    var monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var firstDay = new Date(y, m, 1).getDay();
    
    function drawCalendar()
    {
        var html = "<table><tr><th>星期日</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th></tr>";
        var date = 1;
        for(var i = 0; i < 6; i++)
        {
            html += "<tr>";
            for(var j = 0; j < 7; j++)
            {
                if(i == 0 && j < firstDay)
                {
                    html += "<td></td>";
                }
                else if(date > daysInMonth(m, y))
                {
                    break;
                }
                else
                {
                    html += "<td onclick='alert("'+monthNames[m]+' '+date+', '+y+'")'>" + date + "</td>";
                    date++;
                }
            }
            html += "</tr>";
        }
        html += "</table>";
        document.getElementById('calendar').innerHTML = html;
    }
    
    function daysInMonth(m, y)
    {
        return 32 - new Date(y, m, 32).getDate();
    }
</script>

在以上的代码中,我们首先定义了月份的名称,以及当前年月日。然后,我们通过计算当前月份的第一天是星期几,来确定日历的第一行应该从星期几开始填充日期。接着,我们通过一个for循环来描绘整个日历,其中我们使用嵌套的for循环来循环每一行和每一列,以填充日期。如果某一天是当前月份的第一天且不是星期日,则利用一个空来占位;如果某一天是当前月份的最后一天,则跳出整个循环。最后,我们将这些内容填充到HTML

标签中,并且使用JavaScript将其渲染到HTML页面上。