Heim > Artikel > Web-Frontend > Der einfachste native Kalender in js

Der einfachste native Kalender in js

php中世界最好的语言Original: 2017-12-30 16:59:421730Durchsuche

Was ich Ihnen dieses Mal vorstelle, ist der einfachste native Kalender in js. In einem kürzlich durchgeführten Projekt habe ich plötzlich entdeckt, dass Datumsobjekte hinzugefügt und entfernt werden können, um ein Programm zu schreiben, das als perfekt gilt Für alle, die sich mit JavaScript auskennen: Sie können einen Kalender schreiben. Dieser Artikel gibt Ihnen eine gute Einführung.

<!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(&#39;date&#39;).innerHTML = ""; 
       
    var nian = dat.getFullYear();//当前年份 
    var yue = dat.getMonth(); //当前月 
    var tian = dat.getDate(); //当前天 
    var arr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]; 
    document.getElementById(&#39;nian&#39;).innerText = nian; 
    document.getElementById(&#39;yue&#39;).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(&#39;li&#39;); 
     document.getElementById(&#39;date&#39;).appendChild(li); 
    } 
       
    for(var i=1;i<=setTian;i++){//利用获取到的当月最后一天 把 前边的 天数 都循环 出来 
     var li=document.createElement(&#39;li&#39;); 
     li.innerText = i; 
     if(nian == nianD && yue == yueD && i == tianD){ 
      li.className = "active"; 
     }else{ 
      li.className = "hover"; 
     } 
        
     document.getElementById(&#39;date&#39;).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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Erklärungen und Beispiele für boolesche Werte, relationale Operatoren und logische Operatoren in JS

Was Sieht die JS-Engine aus, wenn sie läuft

So laden Sie NodeJS herunter und installieren es

Das obige ist der detaillierte Inhalt vonDer einfachste native Kalender in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Funktion der Destrukturierungszuweisung in ES6Nächster Artikel：So verwenden Sie die Funktion der Destrukturierungszuweisung in ES6

In Verbindung stehende Artikel

Mehr sehen