jQuery+CSS3绘制网页日历(jquery卡通圆圈可旋转特效实例代码)

jQuery+CSS3绘制网页日历(jquery卡通圆圈可旋转特效实例代码)
jQuery+CSS3绘制的网页日历效果。利用ul特性，和eq遍历。代码简洁。

以下是一个使用jQuery和CSS3绘制的简洁网页日历效果的示例代码：

HTML代码：

<div class="calendar">
  <ul class="calendar-header">
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    <li>周四</li>
    <li>周五</li>
    <li>周六</li>
    <li>周日</li>
  </ul>
  <ul class="calendar-body">
    <li></li>
    <li></li>
    <!-- 其他日期 -->
  </ul></div>

CSS代码：

.calendar {  width: 400px;  margin: 0 auto;
}.calendar-header {  list-style: none;  display: flex;  justify-content: space-between;  padding: 10px;  background-color: #f0f0f0;  font-weight: bold;
}.calendar-body {  list-style: none;  display: flex;  flex-wrap: wrap;  padding: 10px;
}.calendar-body li {  width: calc(100% / 7);  height: 40px;  border: 1px solid #ddd;  display: flex;  align-items: center;  justify-content: center;
}

jQuery代码：

$(document).ready(function() {  // 获取当前日期
  var today = new Date();  var year = today.getFullYear();  var month = today.getMonth() + 1;  
  // 渲染日历
  renderCalendar(year, month);
});function renderCalendar(year, month) {  // 清空日历
  $('.calendar-body li').empty();  
  // 获取当月第一天
  var firstDay = new Date(year, month - 1, 1);  var startDay = firstDay.getDay();  
  // 获取当月总天数
  var totalDays = new Date(year, month, 0).getDate();  
  // 填充日历
  for (var i = 0; i < totalDays; i++ ) {
    $('.calendar-body li').eq(startDay + i).text(i + 1);
  }
}

jquery卡通圆圈可旋转特效，jquery垂直下拉多级菜单，jQuery图片卷轴效果，jquery雷达信号探测器特效，