html制作日历备忘录,原生JS代码制作带记事备忘功能的双月份显示效果的日历

原生JS写的日历月历 - demo by js.alixixi.com

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 ? '

＜ '+(month-1)+'

' : '

'+(month+1)+' ＞

')+'

'+year+'- '+month+'

';

var aLi = obj.getElementsByTagName("li");

for(var i=0;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

aLi[i].innerHTML = i+1;

Today();

}

break;

case 1:

for(var i=0;i

aLi[i+1].innerHTML = i+1;

Today();

}

break;

case 2:

for(var i=0;i

aLi[i+2].innerHTML = i+1;

Today();

}

break;

case 3:

for(var i=0;i

aLi[i+3].innerHTML = i+1;

Today();

}

break;

case 4:

for(var i=0;i

aLi[i+4].innerHTML = i+1;

Today();

}

break;

case 5:

for(var i=0;i

aLi[i+5].innerHTML = i+1;

Today();

}

break;

case 6:

for(var i=0;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[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

if(tLi[j].innerHTML == tDate.getDate()){

tLi[j].style.color = "#000";

tLi[j].style.background = "#e6dcda";

}

}

}

nowDay();

}

×