jQuery2 开发秘籍

在这个问题中，我们需要使用jQuery来创建一个简单的日历应用。这个应用需要能够显示当前月份的日历，并允许用户点击日期来选择。

以下是一个简单的实现示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Calendar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
<div id="calendar"></div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




#calendar {
    width: 240px;
    border: 1px solid #000;
    margin: 20px;
    padding: 10px;
}
 
.day {
    width: 30px;
    height: 30px;
    margin: 2px;
    float: left;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 30px;
}
 
.day.selected {
    background-color: #f00;
    color: #fff;
}
 
.day.today {
    background-color: #eee;
}

JavaScript (script.js):




$(document).ready(function() {
    function getDaysInMonth(year, month) {
        return new Date(year, month, 0).getDate();
    }
 
    function getStartingDayOfMonth(year, month) {
        return new Date(year, month - 1, 1).getDay();
    }
 
    function buildCalendar(year, month) {
        var daysInMonth = getDaysInMonth(year, month);
        var startingDay = getStartingDayOfMonth(year, month);
 
        var html = '<table>';
        html += '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>';
 
        for (var i = 0; i < startingDay; i++) {
            html += '<td></td>';
        }
 
        for (var day = 1; day <= daysInMonth; day++) {
            if ((day + startingDay - 1) % 7 === 0) {
                html += '</tr><tr>';
            }
            html += '<td class="day">' + day + '</td>';
        }
 
        html += '</tr></table>';
 
        $('#calendar').html(html);
    }
 
    var today = new Date();
    buildCalendar(today.getFullYear(), today.getMonth() + 1);
 
    $('#calendar').on('click', '.day', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

这个实现包括了创建日历的基本功能，包括计算一个月的天数和一个月的开始日子，以及如何在页面上构建日历布局。用户可以点击日期来选择，被选择的日期会高亮显示。这个例子提供了一个简单的起点，开发者可以在此基础上添加

jQuery2 开发秘籍

评论已关闭

推荐阅读