突然發現日期對象可以進行 加減 ， 利用這個特性寫了一個可以說是對只要會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原生日歷的實例(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
