前端:自制年历

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

①获取起始位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;

}

}

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

相关推荐
初心w50t227 分钟前
Vue 前端开发性能优化攻略
前端·javascript·vue.js
{⌐■_■}28 分钟前
【软件工程】tob和toc含义理解
前端·数据库·mysql·golang·软件工程·tidb
码农捻旧1 小时前
前端性能优化:从之理论到实践的破局道
前端·性能优化
3Katrina1 小时前
前端面试之防抖节流(一)
前端·javascript·面试
浏览器API调用工程师_Taylor1 小时前
自动化重复任务:从手动操作到效率飞跃
前端·javascript·爬虫
赵润凤1 小时前
Vue 高级视频播放器实现指南
前端
FogLetter2 小时前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主2 小时前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴2 小时前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子2 小时前
tailwind ( uni ) === 自定义主题
前端