第230练最终效果：
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: blackcolor: 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;
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
