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

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

 
 
  
   
   
   
   *{ 
    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; 
   } 
   
  
  
   
   
   
 
    上一月 
    2017 
    下一月 
   
 
   
一月 
   
 
    
日
 
    
一
 
    
二
 
    
三
 
    
四
 
    
五
 
    
六
 
   
 
   
 
   
 
   
   
   
  

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