初学前端花了一下午写了一个简单的日历效果:
可以选择按月或者按年切换,当前日期会有绿色的背景显示, 所有的日期都会正确的对应星期几。
所有代码:
简单日历效果
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
display: flex;
flex-direction: row;
}
li {
display: block;
list-style: none;
}
body {
background-color: rgb(236, 195, 202);
}
.cal-container .year-month>div:first-child>span,
.cal-container .year-month .pre,
.cal-container .year-month .next,
.cal-container .weeks>ul>li,
.cal-container .days>ul .style-default {
cursor: pointer;
}
.cal-container .year-month .pre:hover,
.cal-container .year-month .next:hover,
.cal-container .weeks>ul>li:hover {
text-shadow: 2px 2px 2px rgb(121, 121, 121);
}
.cal-container {
display: flex;
flex-direction: column;
position: absolute;
top: 20%;
left: 50%;
width: 600px;
margin-left: -300px;
box-shadow: 7px 7px 7px rgb(112, 112, 112);
background-color: aquamarine;
}
.cal-container .year-month {
position: relative;
width: 100%;
height: 250px;
background-color: rgb(107, 215, 168);
}
.cal-container .year-month>div:first-child {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 70px;
transform: translate(-50%, -50%);
text-align: center;
letter-spacing: 3px;
}
.cal-container .year-month>div:first-child>span {
display: block;
margin-bottom: 5px;
font-weight: 700;
color: white;
}
.cal-container .year-month>div:first-child>span:first-child {
font-size: 40px;
}
.cal-container .year-month>div:first-child>span:last-child {
font-size: 25px;
}
.cal-container .year-month .pre,
.cal-container .year-month .next {
position: absolute;
top: 50%;
height: 40px;
transform: translateY(-20px);
margin: 0 20px;
font-size: 40px;
color: white;
}
.cal-container .year-month .next {
right: 0;
}
.cal-container .weeks>ul,
.cal-container .days>ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
padding: 0 2.5px;
background-color: rgb(202, 202, 202);
}
.cal-container .days>ul {
padding: 20px 0;
background-color: rgb(225, 225, 225);
}
.cal-container .weeks>ul>li {
width: 85px;
font-size: 20px;
font-weight: 700;
color: rgb(75, 75, 75);
text-align: center;
line-height: 50px;
}
.style-default {
width: 50px;
height: 50px;
margin: 0 17.5px;
font-size: 20px;
font-weight: 700;
color: rgb(75, 75, 75);
text-align: center;
line-height: 50px;
}
.days>ul .style-default:hover {
background-color: rgb(202, 202, 202);
}
.cal-container .days>ul .bg-style {
background-color: rgb(107, 215, 168);
}
.no-style {
width: 50px;
height: 50px;
margin: 0 17.5px;
}
;
;
Mon
Tue
Wed
Thu
Fri
Sat
Sun
// 获取年月日和星期几
let date = new Date();
Y = date.getFullYear();
M = date.getMonth();
W = date.getDay();
D = date.getDate();
isSelect = true; //true为选择了月,false为选择了年(添加文本阴影)
// 更新当前年
let yearNow = document.getElementById("year");
yearNow.innerHTML = Y;
// 更新当前月
let monthNow = document.getElementById("month");
monthNow.innerHTML = monthAndMaxDay(Y, M)[0];
// 判断选中年还是月(添加文本阴影)
selected(isSelect);
//更新当前日
let days = document.getElementById("day");
updateAllDays(Y, M);
// 选择按月切换还是按年切换
yearNow.addEventListener("click", function() {
isSelect = false
selected(isSelect);
});
monthNow.addEventListener("click", function() {
isSelect = true;
selected(isSelect);
});
// 左右切换日期
let previous = document.getElementById("pre-month");
previous.addEventListener("click", function() { changePage(true); });
let next = document.getElementById("next-month");
next.addEventListener("click", function() { changePage(false); });
// 按日查询对应的星期几
function dayToStar(year, month, day) {
let theDate = new Date(year, month, day);
return theDate.getDay();
}
// 查询一个月对应的英文命名和最大天数
function monthAndMaxDay(year, month) {
let month_now = "";
let maxDay = 0; // 一个月的最大天数
switch(month+1) {
case 1: month_now = "一月"; maxDay = 31; break;
case 2:
month_now = "二月";
if(year % 4 == 0) {
maxDay = 29;
} else {
maxDay = 28;
}
break;
case 3: month_now = "三月"; maxDay = 31; break;
case 4: month_now = "四月"; maxDay = 30; break;
case 5: month_now = "五月"; maxDay = 31; break;
case 6: month_now = "六月"; maxDay = 30; break;
case 7: month_now = "七月"; maxDay = 31; break;
case 8: month_now = "八月"; maxDay = 31; break;
case 9: month_now = "九月"; maxDay = 30; break;
case 10: month_now = "十月"; maxDay = 31; break;
case 11: month_now = "十一月"; maxDay = 30; break;
case 12: month_now = "十二月"; maxDay = 31; break;
default: month = "";
}
return [month_now, maxDay];
}
// 更新当前月的所有天数
function updateAllDays(year, month) {
let offset = dayToStar(year, month, 1);
let maxDay = monthAndMaxDay(year, month)[1];
// 实现日期和星期对应
for(let i=0; i |