CCS小技巧，如何使用CSS Grid制作簡單的日歷，簡單有趣

歷是人類文明的重要工具之一。然后可以記住許多重要事件，并從事件的確切日期追溯到真相。

在本文中，我們將學習如何利用CSS Grid系統（最近在前端開發人員中流行的一種布局技術）來使用HTML和CSS設計日歷。以下是日歷的最終設計效果：

制作HTML

從圖片中我們可以看出日歷包含三個部分：月指標；工作日/周末指標；日期本身。

編寫HTML的最佳方法是遵循正確的感覺。現在，我們將根據以下三個部分創建HTML：

我們還應該能夠看到日歷上網格的七個列的需求。

我們將重點放在上面的代碼.day-of-week和.date-grid上面的代碼上，因為現在我們只在談論網格。

網格排列

有兩種創建CSS Box的方法。第一種方法是在內部組合元素.day-of-week并.date-grid 成為一個選擇器。如果要這樣做，我們可以安排display: grid。如果執行此操作，HTML將是什么樣的：

我們應該避免這種方法，因為HTML失去了它的結構意義，因為它結合起來，讓我們嘗試保存.day-of-week并date-grid 作為一個獨立的元素，如果可能的。因為這使得我們更容易閱讀/理解已經寫入的代碼。這是最好的HTML結構：

創建具有簡單結構的CSS網格的最佳方法是使用子網格。但是，大多數瀏覽器尚不支持子網格。同時，最好的辦法就是讓兩個獨立的電網，一個是.day-of-week和一個.date-grid。因此，它可以解釋.day-of-week并.date-grid可以使用相同的七個柱網。

實際日期調整

2019年2月從星期五開始。如果我們希望日歷正確無誤，則需要確保：2019年2月1日為星期五；2019年2月2日為星期六；2019年2月3日是星期日等等...

使用CSS Grid，可以簡化這一部分。

CSS Grid的放置算法在某種程度上遵循以下規則（如果我們未將其設置grid-auto-flow為dense）：放置具有顯式grid-column或grid-row第一位的項目；根據最后放置的項目填寫其余部分

這表示：如果第一項屬于第6列；第二項將放置在第7列中。；第三項將放置在第一行的下一行中（因為只有七列）；第四項將放置在第2列中等等...

因此，如果我們將2月1日放置在第六列（星期五），則其余日期將正確放置。像這樣的簡單邏輯...

以下是整個使用的代碼：源代碼HTML

avaScript實現的日歷效果，如下圖所示：

JavaScript實現的日歷效果圖

可以嘗試在多個瀏覽器中，測試運行網頁的效果，我這里在如下幾個瀏覽器運行，如下圖所示：

實現代碼如下：

<!doctype html>

<head>

<title>Document</title>

<style type="text/css">

/*日歷標題樣式 */

#divTitle

{

width:400px;

height:30px;

font-size:20px;

color:#0000ff;

text-align:center;

}

/*日歷表格布局樣式 */

#divDate

{

width:400px;

height:320px;

border:4px solid gray;

background-color:#ddd;

padding-top:4px;

font-size:20px;

}

/*日歷文字樣式 */

.tableStyle

{

width:400px;

height:300px;

text-align:center;

color:blue;

}

</style>

<script type="text/javascript">

var weekDays = new Array("日","一","二","三","四","五","六");//星期

var days = new Array("31","28","31","30","31","30","31","31","30","31","30","31");//天

var months = new Array("1","2","3","4","5","6","7","8","9","10","11","12");//月

document.write("<div id='divTitle'>我的日歷</div>");

var now = new Date();

var month = now.getMonth();//獲得月份

var day = now.getDate();//獲得日期

var f = 1;

now.setDate(1);

var first = now.getDay();

var str = new String();

//在<div>中創建<table>標簽顯示日歷

document.write("<div id='divDate'>");

document.write("<table class='tableStyle'>");

document.write("<tr>");

//輸出周日到周六

for(var t in weekDays)

{

document.write("<th style='height:25px'>"+weekDays[t] + "</th>");

}

document.write("</tr>");

var rows = (parseInt(days[month]) + parseInt(first) + 7 ) / 7;

//輸出日歷表格的行和列

for (var i= 0 ; i < parseInt(rows) ; i++ )//日歷表格的行

{

document.write("<tr>");

for (var j= 0 ; j < 7 ; j++ )//日歷表格的列

{

document.write("<td id="+f+">");

if (i == 0 && j < first)

{

document.write("");

}

else

{

if (f == day)

{

document.getElementById(f).style.background = "red";//以紅色背景顯示"今天"

}

if (f > days[month])

f = days[month];

else

document.write(f);

f++;

}

document.write("</td>");

}

document.write("</tr>");

}

document.write("</table></div>");

</script>

</head>

<body>

</body>

</html>

這就是用JavaScript實現的日歷效果，請大家動起手來試試吧，展示你的實現效果。

言

作為一名前端開發人員，設計師給的UI要實現日歷，找了找開源的項目，發現不是樣式不符合就是交互不符合，改源碼看不懂？頭都大，今天就教教大家用200行不到的代碼實現精美日歷(h5+微信小程序都適用)

效果

思路

以window10系統的日歷為例，我們可以看出，一個月份的日歷組成總共為7列6行，日期有三個部分組成，1為上月由于該月第一天的周幾產生的空白部分，2為本月的所有天數，3，為6x7-(上月空白部分 + 本月天數)

win10日歷

開始寫代碼

計算本月天數

 getDates (d, t = 0) {
 var curDate = new Date(d.replace(/-/g, '/'))
 var curMonth = curDate.getMonth()
 curDate.setMonth(curMonth + t + 1)
 curDate.setDate(0)
 var curDates = new Array(curDate.getDate()).fill(0).map((item, key) => {
 return key + 1
 })
 return curDates
 }

getDates（d）中的參數d為該月的任意一天，方法放回該月有效的所有天數

計算該月第一天是星期幾

 getWeek (d) {
 var curDate = new Date(d.replace(/-/g, '/'))
 curDate.setDate(1)
 return curDate.getDay()
 }

計算該月+前后留白天數

 getFullChunkDates (d) {
 var curDates = this.getDates(d)
 var preDates = this.getDates(d, -1)
 var nexDates = this.getDates(d, 1)
 var curWeek = this.getWeek(d)
 curDates = curDates.map((i, k) => {
 return {
 num: i,
 fullDate: /(^\d{4})-(\d{1,2})-/.exec(d)[0] + i,
 show: 1
 }
 })
 preDates = preDates.map(i => {
 return {
 num: i,
 show: 0
 }
 })
 nexDates = nexDates.map(i => {
 return {
 num: i,
 show: 0
 }
 })
 var preCurDates = preDates.slice(preDates.length - (curWeek === 0 ? 6 : curWeek - 1), preDates.length).concat(curDates)
 return preCurDates.concat(nexDates.slice(0, 42 - preCurDates.length))
 }

獲取天數用于圖層渲染(計算2019-10-16所在月份的日歷)

#js--------------------
data () {
 return {
 days: []
 }
}
created () {
 this.days = this.getFullChunkDates('2019-10-16')
}
#html--------------------
<view class="c-day">
 <view class="d-item"
 :key="key" v-for="(item, key) in days">
 <text>{{item.num}}</text>
 </view>
</view>

為了保證渲染不出現胡亂，必須保證.c-day節點下的.d-item為7x6的分布狀態

結語

今天教大家如何自己實現日歷就完成了，覺得不錯就點幾下關注和分享唄

《原文發表于本人博客kyeteo.cn》

在線咨詢

上一篇：WordPress評論彈幕，讓你的博客變得好玩兒
下一篇：網頁模版設計布局的使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CCS小技巧，如何使用CSS Grid制作簡單的日歷，簡單有趣

制作HTML

網格排列

實際日期調整

以下是整個使用的代碼：源代碼HTML

言

效果

思路

開始寫代碼

結語

您的項目需求