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');
? ? ? ? }
? ? }
}
