文章詳情頁

原生JS實現相鄰月份日歷

瀏覽：182日期：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. ASP動態網頁制作技術經驗分享2. vue項目登錄成功拿到令牌跳轉失敗401無登錄信息的解決3. php使用正則驗證密碼字段的復雜強度原理詳細講解原創4. JSP+Servlet實現文件上傳到服務器功能5. 淺談由position屬性引申的css進階討論6. ASP 信息提示函數并作返回或者轉向7. 基于javaweb+jsp實現企業財務記賬管理系統8. CSS可以做的幾個令你嘆為觀止的實例分享9. vue前端RSA加密java后端解密的方法實現10. asp批量添加修改刪除操作示例代碼

排行榜

					
					python中HTMLParser模塊知識點總結
JSP+Servlet實現文件上傳到服務器功能
Ajax對xml信息的接收和處理操作實例分析
ajax請求后臺得到json數據后動態生成樹形下拉框的方法
asp批量添加修改刪除操作示例代碼
ASP 信息提示函數并作返回或者轉向
ASP動態網頁制作技術經驗分享
基于Ajax的聊天機器人功能的實現
使用.net core 自帶DI框架實現延遲加載功能
CSS可以做的幾個令你嘆為觀止的實例分享
Intellij IDEA如何去掉@Autowired 注入警告的方法
				