第231练最终效果如下：
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>第231练</title><link rel=”stylesheet” href=”index.css” /></head><body><div class=”calendar-container”><p class=”month-name” id=”month-name”>April</p><p class=”day-name” id=”day-name”>Friday</p><p class=”day-number” id=”day-number”>20</p><p class=”year” id=”year”>2020</p></div><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;display: flex;justify-content: center;height: 100vh;align-items: center;font-family: cursive;background-color: slateblue;}.calendar-container {background-color: white;width: 300px;text-align: center;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);overflow: hidden;}.month-name {margin: 0;background-color: orangered;color: white;padding: 10px;font-size: 30px;font-weight: bold;}.day-name {font-size: 20px;color: darkgray;}.day-number {font-size: 80px;margin: 0;font-weight: bold;}.year {margin: 20px 0;font-size: 20px;color: darkgray;font-weight: 500;}
JS:
const monthNameEl = document.getElementById(“month-name”);const dayNameEl = document.getElementById(“day-name”);const dayNumEl = document.getElementById(“day-number”);const yearEl = document.getElementById(“year”);const date = new Date();const month = date.getMonth();monthNameEl.innerText = date.toLocaleString(“en”, {month: “long”,});dayNameEl.innerText = date.toLocaleString(“en”, {weekday: “long”,});dayNumEl.innerText = date.getDate();yearEl.innerText = date.getFullYear();
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
