溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript怎么實現自定義日歷效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript怎么實現自定義日歷效果”吧!
實現思路：獲取每個月的第一天是星期幾，然后把前面的天數填充為空，在獲取每個月有多少天，循環填充，判斷并給給當前時間添加單獨樣式，點擊上一月，和下一月時改變月份。
獲取當前月第一天：返回值是 0（周日） 到 6（周六） 之間的一個整數
var date = new Date(); var y=date.getFullYear(); var m=date.getMonth(); new Date(y,m,1).getDay();
獲取當前月有多少天
var date = new Date(); var y=date.getFullYear(); var m=date.getMonth(); new Date(y,m+1,-1).getDate()+1;
最后點擊上一月，下一月月份加一或減一，在執行封裝的日歷函數。
全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #2c3e50;
}
.calendar {
width: 400px;
margin: 50px auto;
}
.calendar-tip {
font-size: 16px;
text-align: center;
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怎么實現自定義日歷效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
