首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

(来啦,老弟)从零实现一个日历组件

7列(因为每周有7天,每一天都会对应一个周几),总共有6行,至于为什么需要6行是因为,第一行肯定是显示当月的1号,但是如果某个月的1号是周六,那么第一行7天中就只显示了当月的1号一天,而一个月可能会有31...② 观察日历还可以发现一个规律,就是当月1号对应的是周几,那么前面就要显示下一个月的几天,这样我们就可以根据1号的时间向前移动几天,找到42天中的第一天对应的时间,然后进行遍历,遍历一次加一天,直到42...util.getYearMonthDay(this.value) return `${year}-${month + 1}-${day}` }, visibleDays() { // 获取当月第一天对应的...Date对象 const firstDayOfMonth = new Date(this.time.year, this.time.month, 1) // 获取当月第一天对应的是星期几...e4e7ed; border-radius: 0 0 4px 4px; text-align: center; cursor: pointer; } 其中 utils/util.js

2.2K50

&下一个前端组件“日历

第一,业务型,电商网站、 第二,强交互型,知呼、QQ空间、音乐播放器 第三,展示型,随着鼠标滚动或页面拖动,菜单或页面有不同显示切换 常会有同学说不知道如何 下手写JS,不知道从哪开始写,不知道操作什么...现在我们先来画一个日历, 首先,最上一排是星期一至星期日,第二排至最后一排是当月的日期。...然后第二排的左起前几个格要空着,为啥呢,因为当月的第一天可能不是当月的星期一,就是说,当月的1号是星期几,1号之前就空几格。 咱们先来验证思路,什么闰年啊,点击按钮月份切换啊,咱们都不管。...先来实现一个最简单的日历,它只有一个功能,就是显示当前月份的日历日历组件,实际上是操作Date日期对象。如果不熟悉它,这个日历是没法写的。...首先,我们来获取相应的日期,先是new一个日期对象, var nstr=new Date(); //当前Date资讯 然后是获得年份 var ynow=nstr.getFullYear(); //年份

1.4K51

前端|利用js实现在日历中的签到效果

效果介绍 日历在手机软件里是非常常见的一个功能,几乎每一个手机都有一个自带的手机日历软件。签到功能也是特别常用的,学习通、淘宝、包括学校使用的热水软件U易也都有运用。...在一些签到获取积分(或者其他奖励)的软件中,签到和日历功能常常是捆绑使用。我们今天要实现的也是签到功能和日历捆绑在一起的效果。 本次的实现效果如下图1.1: ?...关于日历我们需要实现的效果有:①判断某一天是星期几;②判断某个月有几天;③判断某一年是平年还是闰年(即二月份是28天还是29天); 关于签到需要实现的更多的是样式的变化:①点击签到之后,签到按钮要发生变化...,从签到变成已签到;②当签到成功后,页面利用模态框显示“签到成功字样”,如图2.1所示;③当签到成功后日历中对应的日期要发生相应的样式变化; ?...; 关于日历功能实现的具体步骤: (1)利用HTML5代码对页面框架进行搭建: div> <div class="col-xs-2 addre

5.4K20

日历组件的开发思路讲解&&日历组件在实际工作中的使用方式

做一个简单的日历,只需要三样东西: 1、通过Date()对象获取当前的年月日; 2、再获取当月1号是星期几; 3,一个包括12个月的日期的数组; 然后开始画格。...在第一次的时候就是0*7+0,它的值是0; 那么date_str的值就是0-firstday + 1 这个firstday的值,在刚才我们已经通过 var firstday=n1str.getDay(); 获取当月第一天星期几...日历的开头有-1,0,结尾处画出了33号。 这说明需要过滤一下无效日期,现在把例子中那句过滤无效日期的JS代码,给取消注释,再刷新页面,日历就正常了。...那开头的-1和0,肯定是小于等于0了,于是前二个格就是空白;结尾的数字肯定大于当月的月份数字了,所以也是空格。 这就是整个日历的完成思路。...至于获得每个月的月份日期,是通过获取数组m_days[mnow]里的第mnow个月份来得到手。 大家看例子上半部分,数组m_days里存着12个月份,每个月的总天数。

2.7K100

calendar:Python日历的处理与生成

timegm 1个struct_time结构体日期 将日期转换为时间戳 prmonth 2个参数:整型年,月 返回当月日历 prcal 1个参数:整型年份 返回整年日历 测试代码如下所示: import...calendar.monthcalendar(2021, 4)) # 将日期转换为时间戳 print(calendar.timegm(datetime.datetime(2021, 4, 3).timetuple())) # 返回当月日历...个整型参数:年,月 直接返回星期对应的日期列表 itermonthdates 2个整型参数:年,月 迭代月份对应的日期 itermonthdays2 2个整型参数:年,月 迭代月份对应的星期元组,元组包括当月的月号以及星期几...迭代月份对应的月号整型,以星期1开头 print() for i in c.itermonthdays(2021, 4): print(i, end="") 运行之后,效果如下: 实战(获取每月第...2个星期3日期) 假如你现在的公司每月的第2个星期3都要召开大会,那么怎么提前获取日期提醒自己呢?

19820
领券