HTML+CSS+JavaScript实现简单日历效果
作者：@半岛铁盒@
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了HTML+CSS+JavaScript实现简单日历效果的具体代码，供大家参考，具体内容如下
初学前端花了一下午写了一个简单的日历效果：
可以选择按月或者按年切换，当前日期会有绿色的背景显示， 所有的日期都会正确的对应星期几。
所有代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单日历效果</title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="cal-container">
<div class="year-month">
<div>
<span id="month"></span>
<span id="year"></span>
</div>
<div class="pre" id="pre-month"><</div>
<div class="next" id="next-month">></div>
</div>
<div class="weeks">
<ul>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li>Sun</li>
</ul>
</div>
<div class="days">
<ul id="day"></ul>
</div>
</div>
<script>
// 获取年月日和星期几
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<offset; i++) {
let day = document.createElement("li");
day.className = "no-style";
days.appendChild(day);
}
for(let i=1; i<=maxDay; i++) {
let day = document.createElement("li");
let dateNow = new Date();
// 当前日期有绿色背景
if(year == dateNow.getFullYear() && month == dateNow.getMonth() && i == dateNow.getDate()) {
day.className = "style-default bg-style"
} else {
day.className = "style-default";
}
day.id = i;
day.innerText = i
days.appendChild(day);
}
}
// 选择按月切换还是按年切换
function selected(boolean) {
if(boolean) {
monthNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";
yearNow.style.textShadow = "none";
} else {
monthNow.style.textShadow = "none";
yearNow.style.textShadow = "2px 2px 2px rgb(121, 121, 121)";
}
}
// 点击切换事件
function changePage(boolean) {
// 按年切换还是按月切换
if(isSelect) {
// 向前切换还是向后切换
if(boolean) {
M = M-1;
if(M == -1) {
Y--;
M = 11;
}
} else {
M = M+1;
if(M == 11) {
Y++;
M = 0;
}
}
} else {
if(boolean) {
Y--;
} else {
Y++;
}
}
yearNow.innerHTML = Y;
monthNow.innerHTML = monthAndMaxDay(Y, M)[0];
// 清空一个月所有天数
days.innerHTML = "";
// 重新添加一个月所有天数
updateAllDays(Y, M);
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。