Products
GG网络技术分享 2025-03-18 16:13 0
作为一名前端开发人员，设计师给的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))
}
#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》
今天分享一个使用js实现简单日历效果方法。
知识点介绍：
1、引入我的工具包
2、运用JavaScript内置对象 Date
先来看一下运行效果：
如图：
直接上代码：
<!DOCTYPE html><html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 250px;
height: 300px;
background-color: orangered;
margin: 100px auto;
padding: 30px;
}
#box_top{
font-size: 22px;
color: #fff;
margin-bottom: 40px;
display: flex;
justify-content: space-around;
}
#box_bottom{
width: 90%;
height: 70%;
margin: 0 auto;
background-color: orange;
font-size: 50px;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id=\"box\">
<div id=\"box_top\">
<span id=\"year\"></span>
<span>年</span>
<span id=\"month\"></span>
<span>月</span>
<span id=\"day\"></span>
<span>日</span>
<span id=\"week\"></span>
</div>
<div id=\"box_bottom\">
<span id=\"hour\"></span>
<span>:</span>
<span id=\"minute\"></span>
<span>:</span>
<span id=\"second\"></span>
</div>
</div>
<script src=\"../../MyTools/MyTools.js\"></script>
<script>
window.addEventListener(\'load\',function (ev) {
setInterval(function () {
myTool.$(\'year\').innerText = myTool.getTime().year;
myTool.$(\'month\').innerText = myTool.getTime().month < 10 ? \'0\' + myTool.getTime().month : myTool.getTime().month;
myTool.$(\'day\').innerText = myTool.getTime().day < 10 ? \'0\' + myTool.getTime().day : myTool.getTime().day;
myTool.$(\'week\').innerText = myTool.getTime().week ;
myTool.$(\'hour\').innerText = myTool.getTime().hour < 10 ? \'0\' + myTool.getTime().hour : myTool.getTime().hour;
myTool.$(\'minute\').innerText = myTool.getTime().minute < 10 ? \'0\' + myTool.getTime().minute : myTool.getTime().minute;
myTool.$(\'second\').innerText = myTool.getTime().second < 10 ? \'0\' + myTool.getTime().second : myTool.getTime().second;
},1000);
},false);
</script>
</body>
</html>
以上就是使用js实现简单日历效果的详细内容。
Demand feedback
