【每日一练】230—JS实现一款日历效果

每日一练7个月前发布 admin
1,151 0

第230练最终效果:

【每日一练】230—JS实现一款日历效果

HTML:

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>第230练</title>
    <link rel=”stylesheet” href=”index.css” />
  </head>
  <body>
    <div class=”container”>
      <div class=”calender”>
        <div class=”month”>
          <div class=”date”>
            <h1></h1>
            <p></p>
          </div>
        </div>
        <div class=”weekdays”>
          <div>Mon</div>
          <div>Tue</div>
          <div>Wed</div>
          <div>Thu</div>
          <div>Fri</div>
          <div>Sat</div>
          <div>Sun</div>
        </div>
        <div class=”days”></div>
      </div>
    </div>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}
.container{
    width: 100%;
    height: 100vh;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
}
.calender{
    background-color: black
    color: lightgray;
    width: 450px;
    height: 520px;
    border-radius: 10px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .4);
}
.month{
    width: 100%;
    height: 120px;
    background-color: lightseagreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px 10px 0 0;
}
.month h1{
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
}
.month p{
    font-size: 16px;
}
.weekdays{
    width: 100%;
    height: 50px;
    display: flex;
}
.weekdays div{
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.days{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
}
.days div{
    font-size: 14px;
    margin: 3px;
    width: 57.5px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.days div:hover:not(.empty){
    border: 2px solid gray;
    cursor: pointer;
}
.today{
    background-color: lightseagreen;
}

JS:

const monthEl = document.querySelector(“.date h1”);
const fullDateEl = document.querySelector(“.date p”);
const daysEl = document.querySelector(“.days”);
const monthInx = new Date().getMonth();
const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate();
const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() – 1;
const months = [
  “January”,
  “February”,
  “March”,
  “April”,
  “May”,
  “June”,
  “July”,
  “August”,
  “September”,
  “October”,
  “November”,
  “December”,
];
monthEl.innerText = months[monthInx];
fullDateEl.innerText = new Date().toDateString();
let days = “”;
for (let i = firstDay; i > 0; i–) {
  days += `<div class=”empty”></div>`;
}
for (let i = 1; i <= lastDay; i++) {
  if (i === new Date().getDate()) {
    days += `<div class=”today”>${i}</div>`;
  } else {
    days += `<div>${i}</div>`;
  }
}
daysEl.innerHTML = days;

 

© 版权声明

相关文章

暂无评论

暂无评论...