JS實(shí)現(xiàn)一個(gè)簡單的日歷
主要分為三個(gè)部分,1:獲取li元素 2:如何填寫對(duì)應(yīng)的日期 3:如何獲取點(diǎn)擊li元素的事件。
1:通過節(jié)點(diǎn)間關(guān)系的屬性children 獲取li元素(兩個(gè)for循壞遍歷);
2:在遍歷填寫日期時(shí),在第一行判斷在當(dāng)月的第一天在星期幾,然后從第一天開始填寫,直到大于當(dāng)月的天數(shù)就暫停填寫,并開始填寫下個(gè)月的日期。第一行上個(gè)月的日期顯示 : 上月天數(shù)顯示開始值 = 計(jì)算上個(gè)月的天數(shù) - 這個(gè)月開始的第一天在星期幾的值 -1,然后在第一行上月天數(shù)顯示開始值自加。
3:利用JS的事件冒泡獲取li的innerHTML顯示出對(duì)應(yīng)日期
效果圖:
代碼如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>calendar</title> <style> .clear:after{ content:""; display:table; clear:both; } .left{ float:left; } ul{ padding:0px; margin-top:5px; margin-bottom:0px; } ul>li{ float:left; list-style:none; width:30px; height: 21px; border: 1px solid #ccc; text-align:center; } .gray{ color:#766565; } .top { height:25px; } .top .lf-tri{ border:10px solid transparent; border-right-color:black; margin-top:4px; } .top .rf-tri{ border:10px solid transparent; border-left-color:black; margin-top:4px; } .top .content{ width:185px; height:5px; text-align:center; } </style> </head> <body> <div class="top clear"> <div class="left lf-tri" onclick="lastMonth()"></div> <div class="left content">2017年2月1日</div> <div class="left rf-tri" onclick=" nextMonth()"></div> </div> <div> <div id="week"> <ul class="clear"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> <ul> </div> <div id="date" onclick='getDateNum(event)'> <ul class="clear"> <li>30</li> <li>31</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="clear"> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> <ul class="clear"> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> </ul> <ul class="clear"> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> </ul> <ul class="clear"> <li>27</li> <li>28</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="clear"> <li>27</li> <li>28</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div> <script> function $(id){ return document.getElementById(id); } function change(cls){ return document.getElementsByClassName(cls); } function getDateNum(e) { console.log(e && e.target.nodeName)//打印發(fā)生事件的元素,再獲取元素nodeName if(e.target.nodeName=="LI"){//先判斷nodeName是LI if(e.target.className!="gray"){//點(diǎn)擊本月的日期,顯示在日期欄 change("content")[0].innerHTML = year+'年'+(month+1)+'月'+e.target.innerHTML+'日'; }else{//點(diǎn)擊灰色日期即(上個(gè)月或者下個(gè)月日期)切換到當(dāng)月 if(e.target.innerHTML>14){ lastMonth(); }else { nextMonth(); } } } } //獲取年、月 var today = new Date(); var year=today.getFullYear(), month = today.getMonth(); var totalDay; var uls=$("date").children,list; function loadCalendar(){ totalDay=getMonthDays(year,month+1);//計(jì)算一個(gè)月的天數(shù) var firstDay = (new Date(year,month,1)).getDay();//計(jì)算每個(gè)月1號(hào)在星期幾 var lastMonthDay=getMonthDays(year,month); var lastDayCal=lastMonthDay-firstDay+1;//計(jì)算上個(gè)月在第一行顯示的天數(shù) //獲取ul元素 var num=1 ,nextNum=1;//日期顯示 // 類數(shù)組對(duì)象 轉(zhuǎn) 數(shù)組 //uls = Array.prototype.slice.call(uls) //獲取li元素 填充 for(var r=0;r<uls.length;r++){ list=uls[r].children;//遍歷ul,獲得li for(var line=0;line<list.length;line++){ if(r==0){//在第一行 與第一天進(jìn)行判斷 大于等于第一天時(shí)載入日期 if(line>=firstDay){ list[line].innerHTML=num++; list[line].setAttribute("class",""); }else { list[line].innerHTML=lastDayCal++;//第一行的上個(gè)月天數(shù)顯示 list[line].setAttribute("class","gray"); } }else { //判斷是否超出天數(shù) ,不超出則繼續(xù)加,超出則顯示下個(gè)月日期 if(num<=totalDay){ list[line].setAttribute("class",""); list[line].innerHTML=num++; }else { list[line].innerHTML=nextNum++;//下個(gè)月日期顯示 list[line].setAttribute("class","gray"); } } } } } loadCalendar(); function getMonthDays(year,month){ //判斷2月份天數(shù) if(month==2){ days= (year%4==0)&&(year%100!=0)||(year%400==0)? 29:28; }else { //1-7月 單數(shù)月為31日 if(month<7){ days= month%2==1?31:30; }else { //8-12月 雙月為31日 days = month%2==0?31:30; } } return days; } //右擊箭頭下個(gè)月 //change("rf-tri")[0].onclick = function nextMonth() { month++; if(month>11){ year+=1; month=0; } change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日"; //console.log(month+1); loadCalendar(); } //左擊箭頭上個(gè)月 //change("lf-tri")[0].onclick = function lastMonth() { month--; if(month<0){ month=11; year-=1; } change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日"; //console.log(month+1); loadCalendar(); } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
uniapp微信小程序打卡功能的詳細(xì)實(shí)現(xiàn)流程
最近因?yàn)楣ぷ餍枰?搭建了一個(gè)加班打卡的小程序,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序打卡功能的詳細(xì)實(shí)現(xiàn)流程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12webpack項(xiàng)目輕松混用css module的方法
這篇文章主要介紹了webpack項(xiàng)目輕松混用css module的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06JS控件autocomplete 0.11演示及下載 1月5日已更新
JS控件autocomplete 0.11演示及下載 1月5日已更新...2007-01-01javascript使用定時(shí)函數(shù)實(shí)現(xiàn)跳轉(zhuǎn)到某個(gè)頁面
定時(shí)跳轉(zhuǎn)到某個(gè)頁面,比如跳轉(zhuǎn)到一個(gè)頁面處理完任務(wù),然后又回到原來的頁面,這個(gè)用javascript的定時(shí)函數(shù)很容易實(shí)現(xiàn)2013-12-12html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
這篇文章主要介紹了html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼,有需要的朋友可以參考一下2013-12-12ionic 3.0+ 項(xiàng)目搭建運(yùn)行環(huán)境的教程
本篇文章主要介紹了ionic 3.0+ 項(xiàng)目搭建運(yùn)行的教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08再談javascript 動(dòng)態(tài)添加樣式規(guī)則 W3C校檢
Ruby's Louvre blog都是一些精品內(nèi)容,下面這個(gè)是介紹javascript 動(dòng)態(tài)添加樣式規(guī)則,而且最后的函數(shù),可以讓你的css通過w3c的驗(yàn)證。2009-12-12三分鐘學(xué)會(huì)用ES7中的Async/Await進(jìn)行異步編程
這篇文章主要介紹了三分鐘學(xué)會(huì)用ES7中的Async/Await進(jìn)行異步編程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06