<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show</title>
<style>
div{
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
#calendar{
width: 400px;
margin: auto;
}
#calendar::after{
display: block;
content: "";
clear: both;
}
#calendar>div:first-child{
height: 40px;
}
button{
width: 25%;
float: left;
height: 40px;
}
#month{
width: 50%;
float: left;
}
.everyday{
width: 14%;
float: left;
}
</style>
</head>
<body οnlοad="showDate()">
<h3>简单电子日历的设计与实现</h3>
<hr>
<div id="calendar">
<div>
<button οnclick="lastMonth()">上个月</button>
<div id="month"></div>
<button οnclick="nextMonth()">下个月</button>
</div>
<!-- 之所以使用div而不是ul、li来建立星期目录是为了方便js中日历的建立 -->
<div>
<div class="everyday">日</div>
<div class="everyday">一</div>
<div class="everyday">二</div>
<div class="everyday">三</div>
<div class="everyday">四</div>
<div class="everyday">五</div>
<div class="everyday">六</div>
</div>
<div id="day"></div>
</div>
<script>
// 获取现在的日期时间
var today = new Date();
// 获取年份
var year = today.getFullYear();
// 获取月份,因为月份是从0开始计算的,所以为了正常显示(即从一开始计数)要+1
var month = today.getMonth() + 1;
// 获取日数
var day = today.getDate();
// 为当月的天数创造变量以承载
var allday = 0;
// 计数当前月份有几天,将结果存放在allday中
function count(){
// 因为2月份的天数特殊,所以单独考虑
if(month != 2){
if((month == 4) || (month == 6) || (month == 9) || (month == 11)){
allday = 30;
}else{
allday = 31;
}
}else{
// 区分闰年与非闰年
if (((year % 4) ==0) && ((year % 100) != 0)) {
allday = 29;
}else{
allday = 28;
}
}
}
// 在“上个月”和“下个月”的按钮之间的位置显示当前月份
function showMonth(){
// 获取html文件中id为month的div
var year_month = document.getElementById("month");
// 因为year,month为全局变量,所以可以直接使用
year_month.innerHTML = year + "年" + month + "月";
}
function showDate(){
// 将前面两个函数嵌套进来便于调用
showMonth();
count();
// 获取当前年份当前月的第一天
var firstdate = new Date(year, month - 1,1 );
// 获取当前年份当前月的第一天是星期几
var xinqi = firstdate.getDay();
// 初始化用于显示日历的div
var daterow = document.getElementById("day");
daterow.innerHTML = "";
// 如果第一天不是星期日,需要在第一天之前用空白填充
if (xinqi != 0) {
for (var i = 0; i < xinqi; i++) {
// 给每一个空白日期添加div
var dayElement = document.createElement("div");
dayElement.className = "everyday";
// 将div添加到初始化后的div中
daterow.appendChild(dayElement);
}
}
// 填充日历
for (var j = 1; j <= allday; j++) {
// 给每一个日期添加div并显示日期
var dayElement = document.createElement("div");
dayElement.className = "everyday";
dayElement.innerHTML = j + "";
daterow.appendChild(dayElement);
}
}
// 上个月按钮调用的函数
function lastMonth(){
if(month > 1) {
month -= 1;
}else{
month = 12;
year -=1;
}
showDate();
}
// 下个月按钮调用的函数
function nextMonth(){
if(month < 12) {
month += 1;
}else{
month = 1;
year +=1;
}
showDate();
}
</script>
</body>
</html>
电子日历的设计与实现
最新推荐文章于 2021-06-26 14:56:03 发布