文章详情页

原生JS实现相邻月份日历

【字号：大中小】日期：2024-04-16 18:59:24浏览：17作者：猪猪

<!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. CSS hack用法案例详解2. CSS可以做的几个令你叹为观止的实例分享3. xpath简介_动力节点Java学院整理4. UDDI FAQs5. 使用Spry轻松将XML数据显示到HTML页的方法6. 低版本IE正常运行HTML5+CSS3网站的3种解决方案7. 三个不常见的 HTML5 实用新特性简介8. CSS 使用Sprites技术实现圆角效果9. XML入门精解之结构与语法10. HTML <!DOCTYPE> 标签

排行榜

					
					将properties文件的配置设置为整个Web应用的全局变量实现方法
VMware中如何安装Ubuntu
IntelliJ IDEA导入jar包的方法
idea打开多个窗口的操作方法
Django中如何使用Channels功能
PHP的FTP学习（一）
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
PHP字符串前后字符或空格删除方法介绍
ASP基础知识Command对象讲解
UDDI FAQs
jsp EL表达式详解
				

热门标签