用 JavaScript 制作一个新年的日历小工具


theme: orange

兔年大吉.png

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

2023年,让我们携手一道兔谋大业、做出兔出贡献!同打拼、共丰盈、多喜乐、长安宁,好运一路相随兔气扬眉!

💂作者简介: 向阳逐梦 ,一名有内涵的嵌入式开发工程师

🤟专栏推荐:Python程序开发与应用 Linux驱动系统开发

👉欢迎支持:点赞👍🏼、收藏⭐、留言📩

新年祝福.gif

日历小部件是事件交互型网站中比较重要的组件之一。因为它可以帮助用户查看特定日期的日程安排或事件信息。除此之外,日历还能用于日期选择器、事件调度器或的日历小部件项目。

image.png

一个可以根据需要设计的日历绝对是你所需要的。因此,我在创建日历小部件的同时也注重日历的自定义。
jcode

HTML结构

在HTML中加载Reset CSS以便清除HTML元素的默认浏览器格式。同样的,添加以下CDN链接到网页的head标签中,以便加载Roboto字体和Font Awesome CSS(用于图标)。

灯笼.png

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

我们需要一个div元素,用于动态呈现日历。因此,创建一个类名为softcarddiv元素,放置next/prev按钮,并放入一个idsoft-btndiv元素。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />  
<div class="softcard">  
  <div class="calendar-bar">  
    <button class="prev soft-btn"><i class="fas fa-chevron-left"></i></button>  
    <div class="current-month"></div>  
    <button class="next soft-btn"><i class="fas fa-chevron-right"></i></button>  
  </div>  
  <div class="calendar">  
    <div class="weekdays-name">  
      <div class="days-name">Sa</div>  
      <div class="days-name">Su</div>  
      <div class="days-name">Mo</div>  
      <div class="days-name">Tu</div>  
      <div class="days-name">We</div>  
      <div class="days-name">Th</div>  
      <div class="days-name">Fr</div>  
    </div>  
    <div class="calendar-days"></div>  
  </div>  
  <div class="goto-buttons">  
    <button type="button" class="btn prev-year">Prev Year</button>  
    <button type="button" class="btn today">Today</button>  
    <button type="button" class="btn next-year">Next Year</button>  
  </div>  
</div>

你可以将上述HTML结构放置在想要创建日历小部件的网页或App的任何位置。

创建日历的CSS样式

在HTML中创建Soft Card之后,现在该设置日历布局的样式了。选择calendar-bar类并定义其宽度、背景、填充和边框属性,如下所示。

你可以根据自己的选择来设置自定义背景颜色。

* {  
  margin: 0;  padding: 0;}  
  
body {  
  height: 100vh;  background: #ddd;  display: flex;  justify-content: center;  
  align-items: center;  font-family: "Quicksand", sans-serif;  user-select: none;  
}  
  
.softcard {  width: 316px;  height: fit-content;  
  background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a);  /* Chrome 10-25, Safari 5.1-6 */  
  background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
  border-radius: 20px;  box-shadow: 0px 0px 10px #000;  
}  
  
.calendar-bar {  display: flex;  justify-content: space-between;  
  align-items: center;  padding: 20px;  padding-bottom: 15px;  
  border-bottom: 19px;  
}  
  
.calendar-bar > .current-month {  
  font-size: 20px;  font-weight: bold;  color: #ddd;  
  background:#000;  padding:5px;  border-radius:10px;  
}  
  
.calendar-bar > [class$="soft-btn"] {  
  width: 40px;  aspect-ratio: 1;  text-align: center;  
  line-height: 40px;  font-size: 14px;  color: #000;  
  background: #ddd;  border: none;  border-radius: 50%;  
}  
  
.weekdays-name,  
.calendar-days {  display: flex;  flex-wrap: wrap;  padding-inline:18px;}  
.weekdays-name {  padding-top: 12px;}  
  
.calendar-days {  padding-bottom: 12px;}  
  
.days-name,  
[class$="-day"] {  width: 40px;  height: 40px;  color: #000;  text-align: center;  
  line-height: 40px;  font-weight: 500;  font-size: 1rem;  
}  
  
.days-name {  color: #fff;  font-weight: 700;}  
  
.current-day {  
  background-color: #000;  color: #fff;  
  border-radius: 50%;  font-weight: 700;  transition: 0.5s;  cursor: pointer;  
}  
  
.padding-day {  
  color: #a5a5a5;  user-select: none;  
}  
  
.calendar-bar > [class$="soft-btn"]:hover,  
.month-day:hover,  
.btn:hover {  
  border-radius:5px;  background-color:#f8f7fa;  color:#000;  border-radius:15px;  
  transition: 0.1s;  cursor: pointer;  
  
}  
  
.calendar-bar > [class$="soft-btn"]:focus,  
.month-day:focus,  
.btn:focus {  border-radius:15px;  background-color: #000;  color: #ddd;  
}  
  
.goto-buttons {  
  border-top: solid 2px yellow;  padding-block: 18px;  display: flex;  
  justify-content: space-evenly;  
}  
  
.btn {  
  background: #eee  border: none;  border-radius: 10px;  
  padding: 11px 13px;  color:#000;  font-family: "Quicksand", sans-serif;  
  font-weight: 600;  font-size: 0.9rem;  margin-right: 1px;  box-shadow: 0px 0px 0px #000;  
}

JavaScript 函数

万事俱备,只欠最后一场东风了——只需要将日历JavaScript函数添加到项目中即可。在关闭body标记之前,在script标记之间添加以下代码。

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

如果你需要添加更多功能,也可以相应地修改代码。非常简单。

var currentMonth = document.querySelector(".current-month");  
var calendarDays = document.querySelector(".calendar-days");  
var today = new Date();  
var date = new Date();  
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});  
today.setHours(0,0,0,0);  
renderCalendar();  
function renderCalendar(){  
    const prevLastDay = new Date(date.getFullYear(),date.getMonth(),0).getDate();  
    const totalMonthDay = new Date(date.getFullYear(),date.getMonth()+1,0).getDate();  
    const startWeekDay = new Date(date.getFullYear(),date.getMonth(),1).getDay();  
    calendarDays.innerHTML = "";  
    let totalCalendarDay = 6 * 7;  
    for (let i = 0; i < totalCalendarDay; i++) {  
        let day = i-startWeekDay;  
        if(i <= startWeekDay){  
            // adding previous month days  
            calendarDays.innerHTML += `<div class='padding-day'>${prevLastDay-i}</div>`;  
        }else if(i <= startWeekDay+totalMonthDay){  
            // adding this month days  
            date.setDate(day);  
            date.setHours(0,0,0,0);             
            let dayClass = date.getTime()===today.getTime() ? 'current-day' : 'month-day';  
            calendarDays.innerHTML += `<div class='${dayClass}'>${day}</div>`;  
        }else{  
            // adding next month days  
            calendarDays.innerHTML += `<div class='padding-day'>${day-totalMonthDay}</div>`;  
        }    }}  
document.querySelectorAll(".soft-btn").forEach(function (element) {  
    element.addEventListener("click", function () {  
        date = new Date(currentMonth.textContent);  
        date.setMonth(date.getMonth() + (element.classList.contains("prev") ? -1 : 1));  
        currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});  
        renderCalendar();  
    });});  
document.querySelectorAll(".btn").forEach(function (element) {  
    element.addEventListener("click", function () {  
        let btnClass = element.classList;  
        date = new Date(currentMonth.textContent);  
        if(btnClass.contains("today"))  
            date = new Date();  
        else if(btnClass.contains("prev-year"))  
            date = new Date(date.getFullYear()-1, 0, 1);  
        else  
            date = new Date(date.getFullYear()+1, 0, 1);  
        currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});  
        renderCalendar();  
    });  
});

2023.jpg

兔年新年走大运,祥瑞如意万事顺,幸福美满乐畅怀,喜色盈门快乐多,金银财宝数不尽,财气亨通福相随,祝朋友们新年快乐!

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容