前端:自制年历

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

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

        }

}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/803520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SSD 可靠性深度分析

固态硬盘&#xff08;SSD&#xff09;因其相对于传统硬盘驱动器&#xff08;HDD&#xff09;的诸多优势而日益受到青睐&#xff0c;包括更快的速度、更小的体积、更高的能效以及由于没有活动部件而增强的耐用性。此外&#xff0c;SSD 现在提供更大的存储容量&#xff0c;且价格…

Kali Linux介绍

Kali Linux是一个基于Debian的Linux发行版&#xff0c;主要用于数字取证和渗透测试。它是由Offensive Security维护和资助的&#xff0c;每季度更新一次。Kali Linux最初是由Offensive Security的Mati Aharoni和Devon Kearns通过重写BackTrack来完成的&#xff0c;而BackTrack也…

蓝桥杯刷题-16-买瓜-DFS+剪枝优化⭐⭐

蓝桥杯2023年第十四届省赛真题-买瓜 该如何剪枝呢&#xff1f;⭐⭐ 如果当前方案的切的刀数&#xff0c;已经大于等于了之前已知合法方案的最优解&#xff0c;那么就没必要 往后搜了。如果后面的瓜的总和加起来&#xff0c;再加上当前已有的重量&#xff0c;都不到m,那么也没…

js语法---简单理解promise

promise语法结构 创建一个promise对象 let p new Promise(function(resolve,reject){// 执行的操作...// 判断操作的结果并执行对应的回调函数if(){resolve()}else{reject()} } 以上实例化了一个promise对象&#xff0c;其中包含了一个参数function&#xff0c;这个函数会在…

MyBatis 应用的组成

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠 加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 大家好&#xff0c;我是王有志。在上一篇文章的最后&#xff0c;我们写了一个简单的例子&#xff0c;今天我们就通过这个例子来看一看一个标准的 MyBatis 应用程序由哪…

css 响应式布局重学笔记

1、常用的布局 1、固定布局。以px为基本单位&#xff0c;不考虑设备的屏幕和尺寸。 2、可切换的固定布局。同样以px作为单位&#xff0c;参考主流设备尺寸&#xff0c;设计几套不同宽度的布局。如移动端一套html代码&#xff0c;PC端一套html代码&#xff0c;程序区分对应的设备…

C#实现HTTP上传文件的方法

/// <summary> /// Http上传文件 /// </summary> public static string HttpUploadFile(string url, string path) {// 设置参数HttpWebRequest request WebRequest.Create(url) as HttpWebRequest;CookieContainer cookieContainer new CookieContainer();reque…

Java基础学习:timestamp时间戳转string格式时间

文章目录 一、代码示例二、Timestamp对象三、TimeZone.getTimeZone传参 一、代码示例 import java.sql.Timestamp; import java.text.SimpleDateFormat; import java.util.*;public class Test{public static void main(String[] args) {System.out.println(TimestampToStr(ne…

Redis高级-分布式缓存

分布式缓存 – 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 0.目标 1.Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;…

《荒野大镖客》游戏提示emp.dll文件丢失如何解决?

emp.dll它作为一种动态链接库&#xff08;DLL&#xff09;文件&#xff0c;在Windows操作系统中扮演着重要角色。当打开一个程序时&#xff0c;操作系统会将程序的代码和数据加载到内存中&#xff0c;并创建一个进程来运行该程序。在这个过程中&#xff0c;emp.dll负责将这些代…

Dev-C++详细安装教程及中文设置(附带安装包链接)

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍*************安装包链接在文章末尾***************** Dev-C详细安装教程…

动态规划刷题(算法竞赛、蓝桥杯)--区间DP

1、题目链接&#xff1a;[NOI1995] 石子合并 - 洛谷 #include <bits/stdc.h> using namespace std; const int N210; int n,a[N],s[N]; int f[N][N];//存最小值 int g[N][N];//存最大值 int main(){memset(f,0x3f,sizeof f);//求最小初始化为无穷大 memset(g,-0x3f,size…

C++中的字符转换 to_string、sto

1.数字转字符串 to_string 将数字转换为字符串 string to_string(int val); string to_string(long val); string to_string(long long val); string to_string(unsigned val); string to_string(unsigned long val); string to_string(unsigned long long val); string to_s…

猫头虎分享已解决Error: 解决“IndexError: list index out of range“

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 文章目录 猫头虎分享已解决Error: 解决"IndexError: list index out of range" &#x1f431;&#x1f989;&#x1f6e0;️摘要正文内容一、错误现场勘察 &#x1f575…

24/04/09总结

异常: 1.异常是什么? 程序中可能出现的问题 2.异常体系的最上层父类是谁?异常分为几类? 父类:Exception。 异常分为两类:编译时异常、运行时异常 编译时异常和运行时异常的区别? 编译时异常:没有继承RuntimeException的异常&#xff0c;直接继承于Exception。 编译阶段就会…

Python实现滑块验证码识别,最简单的一种,没有任何加密

网址链接&#xff1a;衣丰 & 2010-聚衣网(juyi5.cn) - 常熟市聚衣网&#xff0c;聚衣网女装&#xff0c;江苏省女装批发&#xff0c;苏州市女装批发&#xff0c;常熟市女装批发&#xff0c;网销女装一件代发&#xff0c;全国最低价 平时采集数据&#xff0c;频率过快&…

设计模式面试题

概述 设计模式分类 创建型模式 用于描述“怎样创建对象”&#xff0c;主要特点是“将对象的创建与使用分离”。使用者不需要官族对象创建的细节。结构型模式 用于描述如何将类或对象按照某种布局组成更大的结构。行为型模式 用于描述类或对象之间怎样相互协作共同完成单个对象…

数据结构与算法的基本概念1

文章目录 前言一、数据与数据结构1.数据2.数据结构 二、算法是什么&#xff1f;三、线性表1.定义2.特点 总结 前言 T_T此专栏用于记录数据结构及算法的&#xff08;痛苦&#xff09;学习历程&#xff0c;便于日后复习&#xff08;这种事情不要啊&#xff09; 一、数据与数据结构…

Domain Admin:方便快捷的图形化域名和SSL证书监测平台

Domain Admin&#xff1a;一目了然&#xff0c;一键掌握&#xff0c;您的全方位图形化域名与SSL证书智能管家&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 Domain Admin是一个基于Python Vue3.js 技术栈实现的域名和SSL证书监测平台&#xff0c;旨在为用户打造一个…

7-17 爬动的蠕虫

题目链接&#xff1a;7-17 爬动的蠕虫 一. 题目 1. 题目 2. 输入输出样例 3. 限制 二、代码 1. 代码实现 #include <stdio.h>int main(void) {unsigned int n, u, d;unsigned int minute, high;if (scanf("%d %d %d", &n, &u, &d) ! 3) {retur…