文章詳情頁

原生JS實(shí)現(xiàn)相鄰月份日歷

瀏覽：83日期：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實(shí)現(xiàn)雙界面日歷的詳細(xì)內(nèi)容，更多關(guān)于js 日歷的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！

JavaScript

上一條：Django配置Bootstrap, js實(shí)現(xiàn)過程詳解下一條：原生js實(shí)現(xiàn)照片墻效果

相關(guān)文章：

1. html中的form不提交（排除）某些input 原創(chuàng)2. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享3. ASP常用日期格式化函數(shù) FormatDate()4. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果仿百度貼吧3D翻牌一次動(dòng)畫特效5. asp.net core項(xiàng)目授權(quán)流程詳解6. XMLHTTP資料7. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式8. CSS3中Transition屬性詳解以及示例分享9. jsp文件下載功能實(shí)現(xiàn)代碼10. 開發(fā)效率翻倍的Web API使用技巧

排行榜

					
					如何在PHP中讀寫文件
Python數(shù)據(jù)相關(guān)系數(shù)矩陣和熱力圖輕松實(shí)現(xiàn)教程
vue-drag-chart 拖動(dòng)/縮放圖表組件的實(shí)例代碼
PHP正則表達(dá)式函數(shù)preg_replace用法實(shí)例分析
python 截取XML中bndbox的坐標(biāo)中的圖像,另存為jpg的實(shí)例
Django項(xiàng)目如何獲得SSL證書與配置HTTPS
如何使用repr調(diào)試python程序
Django與AJAX實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼
關(guān)于Spring自定義XML schema 擴(kuò)展的問題(Spring面試高頻題)
解決android studio引用遠(yuǎn)程倉庫下載慢(JCenter下載慢)
哪種Python框架適合你？簡(jiǎn)單介紹幾種主流Python框架
				