美文网首页
生成一个月日历(函数封装)

生成一个月日历(函数封装)

作者: 墨芊baby | 来源:发表于2019-04-01 16:56 被阅读0次

整理了一下,这个日历的思路是这样的

  1. 一个月的总天数
  2. 一个月中第一天是星期几,即可知道前面空几个
data(){
  return {
    objmonth:[]
  }
}
methods:{
makeCalendar(year,month){
  let now = new Date()
  let y = now.getFullYear() 
  let m = now.getMonth() 
  let d = now.getDate()
  let now1 = new Date(y,m,d) //当天时间
  let week = now.getDay()
  let endDay = new Date(year,month,0)//下个月的第0天,也说是上个月的最后一天,实例化
  let lastDay = endDay.getDate() //*这个月总天数
  let weekobj = new Date(year,month-1,1) //第一天实例化
  let firstWeek = weekobj.getDay() //第1天周几 即可知道前面空几个
  for(let i = 1;i<=lastDay;i++){
                    let now2 = new Date(year,month,i) //每一天都实例化
                    let _y = _now.getFullYear()
                    let _m = _now.getMonth()
                    let _d = _now.getDate()
                    let _week = _now.getDay()
                    let objday = {
                        ymd: `${_y}-${this.transeNum(_m)}-${this.transeNum(_d)}`
                        day: _d,
                        week: _week,
                        isWeekDay: _week==0 || _week==6,
                        isToday: now1.getTime() == now2.getTime(),
                        isPass: now1.getTime() > now2.getTime()
                    }
                    this.objmonth.push(objday)
                }
                for(let i = 0;i<firstWeek;i++){
                    this.objmonth.unshift('')  //补齐前面的空格
                }
}
transeNum(num){
   return num < 10 ? '0' + num :num   //小于10的数补0
}
}
mounted() {
   this.makeCalendar(2019,4) //调用函数
}
image.png

相关文章

  • 生成一个月日历(函数封装)

    整理了一下,这个日历的思路是这样的 一个月的总天数一个月中第一天是星期几,即可知道前面空几个

  • JS全年日历打印

    用函数打印全年日历,封装函数然后调用。 js

  • JavaScript(三)(对象/原型/继承)

    封装:将属性和方法封装进对象 构造函数:函数中有this指向对象 从构造函数生成实例: 生成实例的时候,为每个实例...

  • 基本扩展模块

    一、calendar模块(即日历模块) calendar模块中有跟日历相关的若干函数和类,可以生成文本形式的日历,...

  • 创建日历

    由于样式需求,日历需要自定义。看网上日历一般每个月显示6行。所有用一下函数生成一个月显示的所有日期。 返回的数组每...

  • Underscore源码阅读:链式调用

    chain Underscore支持链式调用;不过要求函数链的开头要用chain函数生成封装对象。看看chain到...

  • Python入门(33)

    生成日历 生成全年日历

  • 日历封装

    https://github.com/mingwnlong/FSCalendar

  • js生成随机字符串

    原理另行讨论,这里只讲使用 基于上述代码,封装可以得到如下函数生成n位随机数

  • Generator

    Generator函数是一个状态机,封装了多个内部状态。同时Generator还是一个遍历器对象生成函数,执行Ge...

网友评论

      本文标题:生成一个月日历(函数封装)

      本文链接:https://www.haomeiwen.com/subject/lbovbqtx.html