使用 HTML+CSS+JS 制作的夏日风格日历

💂 个人网站:【海拥】【摸鱼小游戏】【开发文档】

🤟 风趣幽默的人工智能学习网站：👉人工智能

💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】

💬 免费且实用的前端刷题（面经大全）网站：👉点击跳转到网站

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

在线预览：haiyong.site/demo/rili/

今天我们实现的是 jQuery 的简单 UI 样式

码上掘金地址：code.juejin.cn/pen/7100768…

实现步骤，首先我们需要创建一个存放日历的div，在HTML中放入如下代码：

<div class='datepicker'>
    <div class="datepicker-header"></div>
</div>

然后我们引入一些需要的JS：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  $(".datepicker").datepicker({
    prevText: '<i class="fa fa-fw fa-angle-left"></i>',
    nextText: '<i class="fa fa-fw fa-angle-right"></i>'
  });
});

上面我们放入了两个图标，是用来选择上月或者下个月的日历。

现在我们显示出的效果是这样：

加入一些基本的CSS样式后效果如下：

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  line-height: 1.6;
}

.datepicker {
  width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
  margin: 50px auto;
  overflow: hidden;
}
.datepicker .datepicker-header {
  height: 245px;
  background-image: url("https://haiyong.site/img/demo/summer.jpg");
  background-position: center center;
  background-size: 100%;
}

加上一张头图，并给它一个宽高，样式稍作调整，显示效果如下：

调整了一下图片跟日历的排版：

.datepicker .ui-datepicker-inline {
  padding: 30px;
}
.datepicker .ui-datepicker-header {
  text-align: center;
  padding-bottom: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

然后设置一下标题，日期改为灰色，首行的样式也换一下

.datepicker .ui-datepicker-calendar {
  width: 100%;
  text-align: center;
}
.datepicker .ui-datepicker-calendar thead {
  color: #ccc;
}
.datepicker .ui-datepicker-calendar tr th,
.datepicker .ui-datepicker-calendar tr td {
  padding-bottom: 0.5em;
}

.datepicker .ui-datepicker-calendar a {
  color: #444;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
}
.datepicker .ui-datepicker-calendar .ui-state-highlight {
  border-color: #d24d57;
  color: #d24d57;
}

a 链接的样式改一下，然后将今天的日期标红圈出来

.datepicker .ui-datepicker-calendar a {
  color: #444;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
}
.datepicker .ui-datepicker-calendar .ui-state-highlight {
  border-color: #d24d57;
  color: #d24d57;
}

到这里就大功告成了，小伙伴们也可以去试试，代码已经提交至码上掘金了，地址：

https://code.juejin.cn/pen/7100768212215660558