js手写日历表

setDate (time) { // 当前指定日期
  let dat = time ? new Date(time) : new Date()
  const timeY = dat.getFullYear().toString()
  const timeM = dat.getMonth().toString()
  let mth = Number(timeM) // 数字化
  let first = new Date(timeY, mth, 1) // 当月开始日期
  const dayStart = moment(first).get('weekday') // 当月开始星期
  let last = new Date(timeY, mth + 1, 0) // 当月结束时间
  const dayLast = moment(last).get('weekday') // 当月结束星期
  let firstDate = moment(first).valueOf() // 需要显示的第一天
  let lastDate = moment(last).valueOf() // 需要显示的最后一天
  if (dayStart !== 6) { // 第一天不是周六(根据显示要求更改,这个例子是以周六开头)
    firstDate = moment(first).subtract(dayStart + 1, 'days').valueOf()
  }
  if (dayLast !== 5) { // 最后一天不是周五(根据显示要求更改,这个例子是以周五结尾)
    if (dayLast === 6) {
      lastDate = moment(last).add(6, 'days').valueOf()
    } else {
      lastDate = moment(last).add(5 - dayLast, 'days').valueOf()
    }
  }
  const dates = []
  const data = []
  for (let i = firstDate; i <= lastDate; i += 24 * 3600 * 1000) {
    dates.push(i)
  }
  for (let i = 0; i < dates.length; i += 7) {
    data.push(dates.slice(i, i + 7))
  }
  this.tableData = _.map(data, item => {
    const row = {}
    _.forEach(item, i => {
      const date = moment(i)
      const day = date.get('weekday')
      row[day] = {
        text: date.format('MM月DD日'),
        isCurrentMonth: i >= moment(first).valueOf() && i <= moment(last).valueOf(),
        time: date.format('YYYY-MM-DD')
      }
    })
    return row
  })
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 手写一个日历可能比较复杂,但可以使用 JavaScript 的 `Date` 对象和一些日期处理函数来实现。下面是一个简单的实现: ``` // 获取当前日期 var now = new Date(); // 获取当前月份 var month = now.getMonth(); // 获取当前年份 var year = now.getFullYear(); // 创建日历的表格 var table = document.createElement("table"); table.setAttribute("border", "1"); table.setAttribute("cellspacing", "0"); table.setAttribute("cellpadding", "5"); document.body.appendChild(table); // 创建表格的标题行 var caption = table.createCaption(); caption.innerHTML = year + "年" + (month + 1) + "月"; var thead = document.createElement("thead"); table.appendChild(thead); var tr = document.createElement("tr"); thead.appendChild(tr); var th = null; for (var i = 0; i < 7; i++) { th = document.createElement("th"); tr.appendChild(th); } th.innerHTML = "星期日"; th.innerHTML = "星期一"; th.innerHTML = "星期二"; th.innerHTML = "星期三"; th.innerHTML = "星期四"; th.innerHTML = "星期五"; th.innerHTML = "星期六"; // 创建表格的主体部分 var tbody = document.createElement("tbody"); table.appendChild(tbody); for (var i = 0; i < 6; i++) { tr = document.createElement("tr"); tbody.appendChild(tr); for (var j = 0; j < 7; j++) { td = document.createElement("td"); tr.appendChild(td); } } // 计算当前月份的天数 var days = new Date(year, month + 1, 0).getDate(); // 计算当前月份第一天是星期几 var firstDay = new Date(year, month, 1).getDay(); // 填充表格的主体部分 var count = 1; for (var i = 0; i < 6; i++) { for (var j = 0; j < 7; j++) { if (i === 0 && j < firstDay) { // 填充空 ### 回答2: 要手写一个JS星期日历,可以按照以下步骤进行: 1. 首先创建一个HTML文件,定义一个容器元素,用于显示日历的表格。 2. 在JS文件中,使用`Date`对象获取当前日期的年份和月份信息,并存储在变量中。 3. 使用`switch`语句确定当前月份的天数,并存储在一个名为`daysInMonth`的变量中。 4. 创建一个名为`calendar`的函数,用于创建和填充日历表格。 5. 在`calendar`函数中,使用`document.createElement()`方法创建HTML元素:表格、行和单元格。 6. 在循环中,根据`daysInMonth`变量的值创建和填充表格的行和单元格。 7. 在每个单元格中,使用Date对象的`getDate()`方法获取日期,并将其填充到单元格中。 8. 使用CSS样式来美化日历表格,例如设置表格边框、单元格宽度、字体样式等。 9. 调用`calendar`函数,将日历表格添加到HTML容器元素中,以便在网页上显示出来。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>JS手写星期日历</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; width: 50px; height: 50px; text-align: center; font-weight: bold; } </style> </head> <body> <div id="calendar"></div> <script> var currentDate = new Date(); var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth(); var daysInMonth; switch(currentMonth) { case 1: if((currentYear % 4 == 0 && currentYear % 100 != 0) || currentYear % 400 == 0) { daysInMonth = 29; } else { daysInMonth = 28; } break; case 3: case 5: case 8: case 10: daysInMonth = 30; break; default: daysInMonth = 31; } function calendar() { var container = document.getElementById("calendar"); var table = document.createElement("table"); for(var i = 0; i < daysInMonth/7; i++) { var row = document.createElement("tr"); for(var j = 0; j < 7; j++) { var cell = document.createElement("td"); var day = i * 7 + j + 1; if(day <= daysInMonth) { cell.innerHTML = day; } row.appendChild(cell); } table.appendChild(row); } container.appendChild(table); } calendar(); </script> </body> </html> ``` 这样,一个简单的JS手写星期日历就完成了。运行该代码,即可在网页上显示出一个以当前月份为基础的日历表格。 ### 回答3: 要手写一个星期日历,可以使用JS编写以下代码: ```javascript // 获取当前日期 var today = new Date(); var year = today.getFullYear(); var month = today.getMonth() + 1; var day = today.getDate(); // 获取本月的第一天和最后一天的日期 var firstDay = new Date(year, month - 1, 1); // 注意月份要减1 var lastDay = new Date(year, month, 0); // 获取上个月的最后一天即本月的最后一天 // 获取本月的天数和第一天是星期几 var numDays = lastDay.getDate(); var firstWeekday = firstDay.getDay(); // 定义一个用于存储星期的数组 var weekDays = ["日", "一", "二", "三", "四", "五", "六"]; // 打印日历头部 console.log(year + "年" + month + "月"); console.log("日 一 二 三 四 五 六"); // 打印空白占位符 for (var i = 0; i < firstWeekday; i++) { process.stdout.write(" "); } // 打印日期 for (var j = 1; j <= numDays; j++) { process.stdout.write((j < 10 ? " " : "") + j + " "); if ((firstWeekday + j) % 7 === 0) { // 每行结束换行 console.log(); } } ``` 这段代码首先获取当前日期,然后计算本月的第一天和最后一天的日期,以及本月的天数和第一天是星期几。然后使用一个存储星期的数组,打印日历头部和星期的标题。 接着打印空白占位符,保证第一天之前的日期没有显示。然后利用循环打印日期,如果每行的日期数达到7个就换行。最后得到一个简单的星期日历输出。 注意:以上代码只是一个简单的示例,可能在细节上还有待完善,比如排版、颜色等。如果需求更复杂,可以根据实际需求进行相应的修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值