js原生日历的实例(推荐)

突然发现日期对象可以进行加减，利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历；没有各种算法，只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
   #data{
    width: 280px;
    border: 1px solid #000000;
    margin: 20px auto;
   }
   #data > p{
    display: flex;
   }
   #data > h5{
    text-align: center;
   }
   #data > p > span{
    padding: 0 10px;
   }
   #prev,#next{
    cursor: pointer;
   }
   #nian{
    flex: 1;
    text-align: center;
   }
   #title{
    overflow: hidden;
    list-style: none;
    background: #ccc;
   }
   #title > li{
    float: left;
    width: 40px;
    height: 26px;
    line-height: 26px;
    text-align: center;
   }
   #date{
    overflow: hidden;
    list-style: none;
   }
   #date > li{
    float: left;
    width: 34px;
    height: 34px;
    margin: 1px 1px;
    border: 2px solid rgba(0,0,0,0);
    line-height: 34px;
    text-align: center;
    cursor: pointer;
   }
   #date > .hover:hover{
    border: 2px solid red;
   }

   .active{
    color: red;
   }
  </style>
 </head>
 <body>

  <div id="data">
   <p>
    <span id="prev">上一月</span>
    <span id="nian">2017</span>
    <span id="next">下一月</span>
   </p>
   <h5 id="yue">一月</h5>
   <ul id="title">
    <li>日</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
   </ul>
   <ul id="date">
   </ul>
  </div>

  <script type="text/javascript">
   var dat = new Date(); //当前时间
   var nianD = dat.getFullYear();//当前年份
   var yueD = dat.getMonth(); //当前月
   var tianD = dat.getDate(); //当前天 这保存的年月日 是为了 当到达当前日期 有对比

   add(); //进入页面第一次渲染

   function add(){
    document.getElementById('date').innerHTML = "";

    var nian = dat.getFullYear();//当前年份
    var yue = dat.getMonth(); //当前月
    var tian = dat.getDate(); //当前天
    var arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
    document.getElementById('nian').innerText = nian;
    document.getElementById('yue').innerText = arr[yue];

    var setDat = new Date(nian,yue + 1,1 - 1); //把时间设为下个月的1号 然后天数减去1 就可以得到 当前月的最后一天;
    var setTian = setDat.getDate(); //获取 当前月最后一天
    var setZhou = new Date(nian,yue,1).getDay(); //获取当前月第一天 是 周几

    for(var i=0;i<setZhou ;i++){//渲染空白 与 星期 对应上
     var li=document.createElement('li');
     document.getElementById('date').appendChild(li);
    }

    for(var i=1;i<=setTian;i++){//利用获取到的当月最后一天 把 前边的 天数 都循环 出来
     var li=document.createElement('li');
     li.innerText = i;
     if(nian == nianD && yue == yueD && i == tianD){
      li.className = "active";
     }else{
      li.className = "hover";
     }

     document.getElementById('date').appendChild(li);
    }

   }

   document.getElementById("next").onclick = function(){
    dat.setMonth(dat.getMonth() + 1); //当点击下一个月时 对当前月进行加1;
    add(); //重新执行渲染 获取去 改变后的 年月日 进行渲染;
   };
   document.getElementById("prev").onclick = function(){
    dat.setMonth(dat.getMonth() - 1); //与下一月 同理
    add();
   };
  </script>
 </body>
</html>

以上这篇js原生日历的实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。