您的位置：首页 > Web前端 > JQuery

用jQuery写一个简单日历

2020-07-23 09:41 519 查看

案例：制作一个简单日历

如下日历的制作思路：先写了三个月的框架，以中间的月份作为当前月份，先获取当前月份的天数，第一天是周几来确定第一天的位置，然后再前后进行补白，计算上月和下个月的天数和位置。年份同理。（每年的农历暂无计算方式，该日历中无农历的写法）
完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=320,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
<div class="calendar">
<div class="calendar_title">
<span class="year">
<div class="year_list">
<span>2019</span>
<span>2020</span>
<span>2021</span>
</div>
</span>
<span class="txt_title">年</span>
<span class="month">
<div class="month_list">
<span>06</span>
<span>07</span>
<span>08</span>
</div>
</span>
<span class="txt_title">月</span>
<span class="week">周六</span>
</div>
<div class="calendar_week">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<div class="calendar_list">
<div class="calendar_day">
<div class="day_1">
<div class="day_list">

</div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_2">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_3">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_4">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_5">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_6">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
</div>
<div class="calendar_day">
<div class="day_1">
<div class="day_list">
</div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_2">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_3">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_4">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_5">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_6">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
</div>
<div class="calendar_day">
<div class="day_1">
<div class="day_list">
</div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_2">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_3">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_4">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_5">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
<div class="day_6">
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
<div class="day_list"></div>
</div>
</div>
</div>

</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/calendar.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航