js原生日歷的實例(推薦)

更新時間：2017年10月31日 09:58:57 作者：當年華褪去生澀

下面小編就為大家?guī)硪黄猨s原生日歷的實例(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

突然發(fā)現日期對象可以進行加減，利用這個特性寫了一個可以說是對只要會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++){//利用獲取到的當月最后一天 把 前邊的 天數 都循環(huán) 出來 
     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(); //重新執(zhí)行渲染 獲取去 改變后的 年月日 進行渲染; 
   }; 
   document.getElementById("prev").onclick = function(){ 
    dat.setMonth(dat.getMonth() - 1); //與下一月 同理 
    add(); 
   }; 
  </script> 
 </body> 
</html>

以上這篇js原生日歷的實例(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: