CSS JS 日历[代码][手把手教程]
index.htmla
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div>
<header>
<div></div>
<div></div>
</header>
<div>
<div>
<span>S</span>
<span>M</span>
<span>T</span>
<span>W</span>
<span>T</span>
<span>F</span>
<span>S</span>
</div>
<div></div>
</div>
</div>
</body>
</html>
style.css
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
font-size: 62.5%;
}
html * {
box-sizing: inherit;
}
body {
background-image: radial-gradient( circle farthest-corner at 11.7% 80.6%, rgba(249,185,255,1) 0%, rgba(177,172,255,1) 49.3%, rgba(98,203,255,1) 89% );
display: grid;
font-family: Helvetica, sans-serif;
font-size: 1.6rem;
min-height: 100vh;
overflow: hidden;
place-content: center;
}
.calendar {
background-color: #FFF;
border-radius: 0.8rem;
box-shadow: 0 0.8rem 1.6rem rgba(35, 131, 157, 0.2);
padding: 3.2rem;
}
.calendar__header {
font-weight: bold;
display: flex;
justify-content: space-between;
letter-spacing: 0.2rem;
padding: 0 0.4rem 1.2rem;
text-transform: uppercase;
}
.calendar__day-names {
border-bottom: 0.1rem solid rgba(98,203,255,1);
display: flex;
gap: 1.2rem;
margin-bottom: 0.8rem;
padding: 0.8rem 0;
}
.calendar__day-name {
aspect-ratio: 1;
color: #828889;
font-weight: normal;
text-align: center;
width: 2.4rem;
}
.calendar__day_numbers {
display: flex;
flex-direction: column;
}
.calendar__day-numbers-row {
display: flex;
gap: 1.2rem;
padding: 0.6rem 0;
}
.calendar__day-numbers-row:first-child {
justify-content: flex-end;
}
.calendar__day-number {
align-content: center;
justify-content: center;
aspect-ratio: 1;
color: #000;
display: flex;
line-height: 1.4;
text-align: center;
width: 2.4rem;
}
.calendar__day-number--current {
background-color: rgba(98,203,255,1);
border-radius: 50%;
box-shadow: 0 0 0 0.4rem rgba(98,203,255,1);
color: #FFF;
}
script.js
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();
document.querySelector('.calendar__month').innerText = months[currentDate.getMonth()];
document.querySelector('.calendar__year').innerText = currentYear;
let daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
let week = document.createElement('div');
week.classList.add('calendar__day-numbers-row');
for(i = 1; i <= daysInMonth; i++){
let day = document.createElement('span');
day.classList.add('calendar__day-number');
day.innerText = i;
(i == currentDay) && day.classList.add('calendar__day-number--current');
week.append(day);
if (new Date(currentYear, currentMonth, i).getDay() == 6 || i == daysInMonth) {
document.querySelector('.calendar__day-numbers').append(week);
if(i != daysInMonth){
week = document.createElement('div');
week.classList.add('calendar__day-numbers-row');
}
}
}
