原生JS实现日历

更新日期: 2018-06-22阅读: 2.7k标签: 时间分享

复制链接

新浪微博

QQ 好友

扫一扫分享

这周写自己的项目发现又用到日历了，加之自己毕业之后的第一个工作中遇到的任务也是需要写个日历(组员写了，我就不用写了)，今天就来好好折腾一下日历是怎么写的。

首先，我们看看 windows 的日历。发现总共有这么几个元素。先实现试试。

1.年份的选择、月份的选择
2.周一 ~ 周日
3.日历格子 6*7 = 42

先来实现个简单的雏形，麻烦的事情慢慢来

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<style>
  .week-item {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    border: 1px solid sandybrown;
    text-align: center;
  }
  .date-item {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    border: 1px solid beige;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="wrapper">
    <div class="year-line">
      <button class="year-prev">上一年</button>
      <button class="year-now">2019</button>
      <button class="year-next">下一年</button>
    </div>
    <div id="weekLine" class="week-line"></div>
    <div id="dateWrap" class="date-wrap"></div>
  </div>
</body>
<script>
  let weekArr = ['一', '二', '三', '四', '五', '六', '日'];
  weekArr = weekArr.map(item => '星期' + item);
  console.log('arr', weekArr);
  // 插入星期 dom
  let weekDomStr = '';
  let oFragWeek = document.createDocumentFragment();
  weekArr.forEach(item => {
    let oSpan = document.createElement('span');
    let oText = document.createTextNode(item);
    oSpan.appendChild(oText);
    oSpan.classList.add('week-item');
    oFragWeek.appendChild(oSpan);
  });
  let weekWrap = document.getElementById('weekLine');
  weekWrap.appendChild(oFragWeek);
  // 插入日期 DOM - 42个dom
  let oFragDate = document.createDocumentFragment();
  let oCount = 0;
  for (let i = 0; i < 6; i++) {
    let oneLineFrag = document.createDocumentFragment();
    let oDiv = document.createElement('div');
    oDiv.classList.add('date-line');
    for (let j = 0; j < 7; j++) {
      let oSpan = document.createElement('span');
      let oText = document.createTextNode(oCount);
      oSpan.classList.add('date-item');
      oSpan.appendChild(oText);
      oneLineFrag.appendChild(oSpan);
      oCount++;
    }
    oDiv.appendChild(oneLineFrag);
    oFragDate.appendChild(oDiv);
  }
  let dateWrap = document.querySelector('#dateWrap');
  dateWrap.appendChild(oFragDate);
</script>
</html>

链接: https://fly63.com/article/detial/3873

原生JS实现日历

js对时间的操作

js 不同时间格式介绍以及相互间的转换

11个顶级 JavaScript 日历插件

js获取任意一天的0点和23:59:59时间

Js实时显示系统时间

Js时间对象Date

Js实现倒计时

一行js代码实现时间戳转时间格式

JS计算时间差

js 判断当前时间是否在某一时间段