js如何實(shí)現(xiàn)日歷功能

這篇文章給大家分享的是有關(guān)js如何實(shí)現(xiàn)日歷功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比瑪曲網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式瑪曲網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋瑪曲地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

突然發(fā)現(xiàn)日期對象可以進(jìn)行加減，利用這個(gè)特性寫了一個(gè)可以說是對只要會(huì)JavaScript 的就可以寫的日歷；沒有各種算法，只有一些邏輯相信只要懂javascript就差不多看倆眼就會(huì)的日歷。

<!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 > h6{ 
    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> 
   <h6 id="yue">一月</h6> 
   <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(); //當(dāng)前時(shí)間 
   var nianD = dat.getFullYear();//當(dāng)前年份 
   var yueD = dat.getMonth(); //當(dāng)前月 
   var tianD = dat.getDate(); //當(dāng)前天 這保存的年月日 是為了 當(dāng)?shù)竭_(dá)當(dāng)前日期 有對比 
    
   add(); //進(jìn)入頁面第一次渲染 
    
   function add(){ 
    document.getElementById('date').innerHTML = ""; 
     
    var nian = dat.getFullYear();//當(dāng)前年份 
    var yue = dat.getMonth(); //當(dāng)前月 
    var tian = dat.getDate(); //當(dāng)前天 
    var arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; 
    document.getElementById('nian').innerText = nian; 
    document.getElementById('yue').innerText = arr[yue]; 
     
    var setDat = new Date(nian,yue + 1,1 - 1); //把時(shí)間設(shè)為下個(gè)月的1號(hào) 然后天數(shù)減去1 就可以得到 當(dāng)前月的最后一天; 
    var setTian = setDat.getDate(); //獲取 當(dāng)前月最后一天 
    var setZhou = new Date(nian,yue,1).getDay(); //獲取當(dāng)前月第一天 是 周幾 
     
    for(var i=0;i<setZhou ;i++){//渲染空白 與 星期 對應(yīng)上 
     var li=document.createElement('li'); 
     document.getElementById('date').appendChild(li); 
    } 
     
    for(var i=1;i<=setTian;i++){//利用獲取到的當(dāng)月最后一天 把 前邊的 天數(shù) 都循環(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); //當(dāng)點(diǎn)擊下一個(gè)月時(shí) 對當(dāng)前月進(jìn)行加1; 
    add(); //重新執(zhí)行渲染 獲取去 改變后的 年月日 進(jìn)行渲染; 
   }; 
   document.getElementById("prev").onclick = function(){ 
    dat.setMonth(dat.getMonth() - 1); //與下一月 同理 
    add(); 
   }; 
  </script> 
 </body> 
</html>

感謝各位的閱讀！關(guān)于“js如何實(shí)現(xiàn)日歷功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁標(biāo)題：js如何實(shí)現(xiàn)日歷功能
網(wǎng)頁鏈接：http://jinyejixie.com/article18/ggsedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、品牌網(wǎng)站制作、定制開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

js如何實(shí)現(xiàn)日歷功能