本文主要讲解“JavaScript如何实现自定义日历效果”，感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“JavaScript如何实现自定义日历效果”！
实现思路：在每个月的第一天得到一周中的某一天，然后将前几天填为空白。得到每个月的天数后，循环填写，判断并给当前时间添加一个单独的样式，通过点击前一个月和下一个月来改变月份。
获取当月的第一天：返回值为0(星期日)到6(星期六)之间的整数。
var date=NewDate()；
vary=date . getfullyear()；
varm=date . getmonth()；
新日期(y，m，1)。getDay()；获取当月的天数。
var date=NewDate()；
vary=date . getfullyear()；
varm=date . getmonth()；
newDate(y，m 1，-1)。getDate()1；最后，点击前一个月和后一个月加减一，执行封装的日历功能。
全部代码：
！DOCTYPEhtml
htmllang='en '
头
metachartset=' UTF-8 '
元名称=“视口”内容=“宽度=设备宽度，初始比例=1.0”
标题文档/标题
风格
*{
margin:0
划水：0；
}
正文{
背景技术： # 2c 3e 50；
}。日历{
宽度width:400px
margin:50pxauto
}。日历提示{
font-size :16 px；
文本对齐：居中；
color: # fff
}
.prev {
float: left;
cursor: pointer;
}
.next {
float: right;
cursor: pointer;
}
.calendar-month {
text-align: center;
margin: 10px 0;
color: #fff;
}
ul {
list-style: none;
display: flex;
}
li {
width: 57px;
text-align: center;
height: 55px;
line-height: 55px;
font-size: 16px;
color: #fff;
}
.calendar-day {
display: flex;
}
.calendar-day span {
flex: 1;
color: #fff;
text-align: center;
height: 40px;
line-height: 40px;
}
.calendar-data {
display: flex;
flex-wrap: wrap;
}
li {
width: 57px;
cursor: pointer;
}
li:hover {
background: #2d3436;
}
.calendar-data .on {
color: #d63031;
}
</style>
</head>
<body>
<div class="calendar">
<div class="calendar-tip">
<span class="prev">上一月</span>
<em id="year">2022年</em>
<span class="next">下一月</span>
</div>
<div class="calendar-month">五月</div>
<div class="calendar-day">
<span>日</span>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
</div>
<ul class="calendar-data">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script>
var date = new Date();
var year = document.querySelector("#year");
var month = document.querySelector(".calendar-month");
var calendarData = document.querySelector(".calendar-data");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var monthArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
var y,m,day,d,html,today;
calendar();
function calendar() {
y = date.getFullYear();
year.innerHTML = y + "年";
m = date.getMonth();
month.innerHTML = monthArr[m];
day = new Date(y, m, 1).getDay(); //获取每个月第一天是周几
d = new Date(y, m + 1, -1).getDate() + 1; //获取多少天
html = "";
//把每个月第一天之前的时间填充为空
for (var i = 0; i < day; i++) {
html += "<li> </li>";
}
for (var j = 1; j <= d; j++) {
if (y==new Date().getFullYear() && m==new Date().getMonth() && j== date.getDate()) {
html += "<li class='on'>" + j + "</li>";
} else {
html += "<li>" + j + "</li>";
}
}
calendarData.innerHTML = html;
}
prev.onclick = function () {
date.setMonth(date.getMonth() - 1);
calendar();
}
next.onclick = function () {
date.setMonth(date.getMonth() + 1);
calendar();
}
</script>
</body>
</html>
效果：
到此，相信大家对“JavaScript怎么实现自定义日历效果”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/76879.html