前端:自制年历

详细思路可以看我的另一篇文章《前端:自制月历》,基本思路一致,只是元素布局略有差异

①获取起始位start=new Date(moment().format('yyyy-01-01')).getDay()

②获取总的格子数num=Math.ceil(365/7)*7,这里用365或者366计算结果都是一样的371

③获取数据,假设年份是YYYY

handleGetDate(){

let dateArr=[],time=moment().format('yyyy-01-01')

for(let i=0;i<num;i++){

if(i < start || time > moment( YYYY+ '-12').endOf('month').format('yyyy-MM-DD')){

dateArr.push(0)

}

else{ dateArr.push(time);time=moment(time).add(1,'days').format('yyyy-MM-DD') }

}

}

⑤视图绑定数据

<div class="calendar">

<header>

<span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span><span>11月</span><span>12月</span>

</header>

<section>

<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>

<span v-for="item,index in data.dateArr" :key="item+''+index">

<div v-if="item!= 0">{{ item }}</div>

</span>

</section>

</div>

⑥根据项目需求调整样式

section{

display:flex;flex-direction:column;flex-wrap:wrap;height:140px;

span{

height:20px;width:20px;

}

}

这是在某个项目中实现的效果:

相关推荐
shushushu2 分钟前
Web如何自动播放音视频
前端·javascript
帅夫帅夫7 分钟前
前端存储入门:Cookie 与用户登录状态管理
前端·架构
陈随易10 分钟前
程序员的新玩具,MoonBit(月兔)编程语言科普
前端·后端·程序员
傻球13 分钟前
前端实现文本描边
前端·canvas
snakeshe101015 分钟前
1. 实现 useEffect
前端
前端进阶者17 分钟前
天地图InfoWindow插入React自定义组件
前端·javascript
Nu1125 分钟前
@babel/preset-env的corejs、@babel/plugin-transform-runtime的corejs之间区别
前端·babel
用户698135449106127 分钟前
three.js绘制中国地理数据
前端
爱学习的茄子27 分钟前
JavaScript闭包实战:防抖的优雅实现
前端·javascript·面试
前端付豪27 分钟前
9、前端日志埋点系统的架构设计
前端·javascript·架构