手把手教你为你的博客添加一个简单日历

一条会coding的Shark
817 阅读4分钟

前言

我们在浏览网页或者他人的博客的时候，可能在有的网页或者博客上存在下面这样的日历展示。

image.png

那么这样的内容是如何实现的呢？当然了，像这些网页或者博客上的日历都是比较高级的，甚至不仅仅有最基本的展示，还可以进行编辑等操作，不过我们可以通过CSS+JS来实现一个简单的日历，虽然没那么高级，但是可以将基本的展示功能实现出来。

效果预览

整体效果如下。

HTML部分

首先是HTML部分，这是整个日历的框架，相关代码如下。

 <div class="calendar">
        <p id="monthname"></p>
        <p id="dayName"></p>
        <p id="dayNumber"></p>
        <p id="year"></p>
    </div>

在这里面包含一个类名为calendar的div元素，用于容纳日历的内容。在div元素内部，有四个p元素，分别具有不同的id属性：第一个p元素的id为monthname，用于显示月份的名称；第二个p元素的id为dayName，用于显示星期几的名称；第三个p元素的id为dayNumber，用于显示日期的数字；第四个p元素的id为year，用于显示年份。

JS部分

然后我们先来看JS部分，这里就是对日历中日期的处理，相关代码如下：

 <script>
        const lang = navigator.language
        let date = new Date()
        let dayNumber = date.getDate()
        let month = date.getMonth()
        let dayName = date.toLocaleString(lang,{weekday: 'long'})
        let monthName = date.toLocaleString(lang,{month: 'long'})
        let year = date.getFullYear()
        document.getElementById('monthname').innerHTML = monthName
        document.getElementById('dayName').innerHTML = dayName
        document.getElementById('dayNumber').innerHTML = dayNumber
        document.getElementById('year').innerHTML = year
    </script>

它首先使用navigator.language获取用户的语言设置。然后，它创建一个Date对象来获取当前的日期和时间。

接下来，使用getDate()方法获取当前日期的数值，getMonth()方法获取当前月份的数值。然后，使用toLocaleString()方法将lang参数传递给weekday选项和month选项，以获取当前日期的完整星期几和月份名称。最后，使用getFullYear()方法获取当前年份。

到这里相当于将年月日获取到了。接下来，便使用getElementById()方法获取HTML文档中具有特定ID的元素，并使用innerHTML属性将日期和年份的值分别设置为相应的元素的内容。

总的来说，达到的效果就是获取当前日期和年份，并将它们显示在HTML文档中具有特定ID的元素中。

CSS部分

年月日可以正常展示了，现在就是来调整它们的样式。 首先来看类名为calendar的样式，相关代码如下。

.calendar{
    position: relative;
    width: 200px;
    background: #fff;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    -webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004);
}

这里是用来设置日历的外观。将日历元素的定位方式设置为相对定位，并定好宽度、颜色等基本属性。在这里使用了-webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004)来设置元素的下方有一个1px高的镜像反射效果，颜色由透明渐变到透明，透明度为0.4，效果就是用于创建一个元素的倒影效果，如下图所示。

image.png

接下来就是包含在calendar里的子元素的样式了，相关代码如下。

.calendar #monthname{
    position: relative;
    padding: 5px 10px;
    background: #ff6331;
    color: #fff;
    font-size: 30px;
    font-weight: 600px;
}
.calendar #dayName{
    margin-top: 20px;
    font-size: 20px;
    font-weight: 300;
    color: #999;
}
.calendar #dayNumber{
    margin-top: 0px;
    font-size: 80px;
    line-height: 1em;
    font-weight: 700;
    color: #333;
}
.calendar #year{
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #999;
}

首先，#monthname表示选择id名为monthname的元素。通过设置position属性为relative，padding属性为5px 10px，background属性为#ff6331，color属性为#fff，font-size属性为30px，font-weight属性为600px，来设置月份的样式。

接下来，.calendar #dayName表示选择类名为calendar的元素下的id为dayName的元素。通过设置margin-top属性为20px，font-size属性为20px，font-weight属性为300，color属性为#999，来设置星期的样式。

然后，.calendar #dayNumber表示选择类名为calendar的元素下的id为dayNumber的元素。通过设置margin-top属性为0px，font-size属性为80px，line-height属性为1em，font-weight属性为700，color属性为#333，来设置日期的样式。

最后，.calendar #year表示选择类名为calendar的元素下的id为year的元素。通过设置margin-bottom属性为20px，font-size属性为20px，font-weight属性为500，color属性为#999，来设置年份的样式。

总结

以上就是该日历的简单实现过程了。主要分为两部分，一是对CSS样式的处理，二是对JS逻辑的处理，总的来说，值得学习。感兴趣的同学可以在码上掘金将完整代码复制下来自己试试效果，有什么问题欢迎在评论区里讨论。

avatar
文章
阅读
粉丝