文章詳情頁

原生JS實現相鄰月份日歷

瀏覽：86日期：2024-04-16 18:59:24

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><title>原生JS寫的日歷月歷 - demo by js.alixixi.com</title><style type='text/css'></style><script type='text/javascript'>window.onload = function(){ function $(id){return typeof id === 'string' ? document.getElementById(id) : id;} function lightBoxShow(title,str) { var oWin = $('win'); var oLay = $('overlay'); $('otitlestr').innerHTML = title; $('showstr').innerHTML = str; oLay.style.display = 'block'; oWin.style.display = 'block'; $('close').onclick = function () { oLay.style.display = 'none'; oWin.style.display = 'none' } } var newDate = document.getElementById('newDate'); var nowDate = document.getElementById('nowDate'); var nextDate = document.getElementById('nextDate'); var nDate = new Date(); if(nDate.getMonth()+1==12){ viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true); viewDate(nextDate,nDate.getFullYear()+1,1); }else{ viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true); viewDate(nextDate,nDate.getFullYear(),nDate.getMonth()+2); } showBtn(); function viewDate(obj,year,month,bBtn){ var nDate = new Date(); var dayNum = 0;if(!obj.bBtn){ obj.Header = document.createElement('div'); obj.Header.className = 'Header'; obj.appendChild(obj.Header); var Weeks = document.createElement('div'); Weeks.className = 'Weeks'; obj.appendChild(Weeks); var weeksArr = [’SUN’,’MON’,’TUE’,’WEB’,’THU’,’FRI’,’SAT’]; for(var i=0;i<7;i++){var nSpan = document.createElement('span');nSpan.innerHTML = weeksArr[i];if(i==0 || i==6){ nSpan.style.color = 'red'; }Weeks.appendChild(nSpan); } var nUl = document.createElement('ul'); for(var i=0;i<42;i++){var nLi = document.createElement('li');nUl.appendChild(nLi); } obj.appendChild(nUl); obj.bBtn = true; } obj.Header.innerHTML = ( bBtn ? ’<div class='l'>＜ <em>’+(month-1)+’</em></div>’ : ’<div class='r'><em>’+(month+1)+’</em> ＞</div>’)+’<div class='c'><em>’+year+’</em>-<em>’+month+’</em></div>’; var aLi = obj.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].innerHTML = ''; aLi[i].style.background = '#f5f5f5'; aLi[i].style.color = '#999'; }if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){ dayNum = 31; } else if(month==4 || month==6 || month==9 || month==11){ dayNum = 30; } else if(month==2 && isLeapYear(year)){ dayNum = 29; } else{ dayNum = 28; } nDate.setFullYear(year); nDate.setMonth(month-1); nDate.setDate(1); function Today(){ var tDate = new Date(); var tEm = aLi[i].parentNode.parentNode.getElementsByTagName('em'); var tMonth = parseInt(tEm[2].innerHTML); var tYear = parseInt(tEm[1].innerHTML); if(aLi[i].innerHTML == tDate.getDate() && tYear == tDate.getFullYear() && tMonth == tDate.getMonth()+1){ aLi[i].style.color = '#000'; aLi[i].style.background = '#e6dcda'; } } switch(nDate.getDay()){ case 0: for(var i=0;i<dayNum;i++){ aLi[i].innerHTML = i+1; Today(); } break; case 1: for(var i=0;i<dayNum;i++){ aLi[i+1].innerHTML = i+1; Today(); } break; case 2: for(var i=0;i<dayNum;i++){ aLi[i+2].innerHTML = i+1; Today(); } break; case 3: for(var i=0;i<dayNum;i++){ aLi[i+3].innerHTML = i+1; Today(); } break; case 4: for(var i=0;i<dayNum;i++){ aLi[i+4].innerHTML = i+1; Today(); } break; case 5: for(var i=0;i<dayNum;i++){ aLi[i+5].innerHTML = i+1; Today(); } break; case 6: for(var i=0;i<dayNum;i++){ aLi[i+6].innerHTML = i+1; Today(); } break; } if(month==1 && bBtn){ obj.Header.getElementsByTagName(’em’)[0].innerHTML = 12; } else if(month==12 && !bBtn){ obj.Header.getElementsByTagName(’em’)[0].innerHTML = 1; } } function isLeapYear(year){ if(year%4==0 && year%100!=0){ return true; } else{ if(year%400==0){ return true; } else{ return false; } } } function showBtn(){ var nowEm = nowDate.getElementsByTagName('em'); var nextEm = nextDate.getElementsByTagName('em'); var leftMonth = parseInt(nowEm[0].innerHTML); var leftYear = parseInt(nowEm[1].innerHTML); var rightMonth = parseInt(nextEm[0].innerHTML); var rightYear = parseInt(nextEm[1].innerHTML); nowEm[0].parentNode.onclick = function(){ if(leftMonth == 12){ viewDate(nowDate,leftYear-1,leftMonth,true); viewDate(nextDate,leftYear,1); } else{ viewDate(nowDate,leftYear,leftMonth,true); viewDate(nextDate,leftYear,leftMonth+1); } showBtn(); }; nextEm[0].parentNode.onclick = function(){ if(rightMonth == 1){ viewDate(nowDate,rightYear,12,true); viewDate(nextDate,rightYear+1,rightMonth); } else{ viewDate(nowDate,rightYear,rightMonth-1,true); viewDate(nextDate,rightYear,rightMonth); } showBtn(); }; } function nowDay(){ var tLi = newDate.getElementsByTagName('li'); var tDate = new Date(); for(var i=0;i<tLi.length;i++){ tLi[i].onmouseover = function(){ if(this.innerHTML != ''){ this.style.color = '#000'; this.style.background = '#e6dcda'; } } tLi[i].onmouseout = function(){ if(this.innerHTML != ''){ this.style.color = '#999'; this.style.background = '#f5f5f5'; } } tLi[i].onclick = function(){ var tEm = this.parentNode.parentNode.getElementsByTagName('em'); var tMonth = parseInt(tEm[2].innerHTML); var tYear = parseInt(tEm[1].innerHTML); if(this.innerHTML!=''){ lightBoxShow(tYear+'-'+tMonth+'-'+this.innerHTML+' Message','None'); //alert(tYear+'-'+tMonth+'-'+this.innerHTML); } } } for(var j=tLi.length/2;j<tLi.length;j++){ if(tLi[j].innerHTML == tDate.getDate()){ tLi[j].style.color = '#000'; tLi[j].style.background = '#e6dcda'; } } } nowDay();}</script></head><body><div id='newDate'> <div id='nextDate'></div> <div id='nowDate'></div></div><div id='overlay'></div><div id='win'> <div id='otitle'> <div id='close'>×</div> <div id='otitlestr'></div> </div> <div id='showstr'></div></div></body></html>

效果：

原生JS實現相鄰月份日歷

以上就是原生JS實現雙界面日歷的詳細內容，更多關于js 日歷的資料請關注好吧啦網其它相關文章！

JavaScript

上一條：Django配置Bootstrap, js實現過程詳解下一條：原生js實現照片墻效果

相關文章：

1. Python如何批量生成和調用變量2. ASP.NET MVC實現橫向展示購物車3. ASP.Net Core對USB攝像頭進行截圖4. .net如何優雅的使用EFCore實例詳解5. ASP.Net Core(C#)創建Web站點的實現6. python 爬取京東指定商品評論并進行情感分析7. python基礎之匿名函數詳解8. Python獲取B站粉絲數的示例代碼9. ajax動態加載json數據并詳細解析10. 通過CSS數學函數實現動畫特效

排行榜

					
					Python如何批量生成和調用變量
PHP安全-數據的暴露
PHP實現基本留言板功能原理與步驟詳解
ASP.Net Core對USB攝像頭進行截圖
python基于爬蟲+django，打造個性化API接口
每日六道java新手入門面試題,通往自由的道路第二天
docker啟動ES內存溢出的解決方案
JSR-220：EJB 3.0 最終草案出臺
Python3 ID3決策樹判斷申請貸款是否成功的實現代碼
Python基于requests實現模擬上傳文件
spring boot 實現阿里云視頻點播功能(刪除視頻)
				