自己写了个JS日历

最新推荐文章于 2024-11-01 17:18:46 发布

原创最新推荐文章于 2024-11-01 17:18:46 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端(javascript) 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JavaScript生成月历的示例代码。该代码通过创建HTML表格来展示指定月份的所有日期，并通过不同的样式高亮显示当前日期。此外，还包含了获取指定日期是一周中的哪一天及一个月有多少天的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



var dayArray = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");  //创建星期数组
	var today = new Date();



	window.onload = function(){
		var tabletag = document.createElement("table");
		tabletag.id = "dateform";
		var oTable = document.body.appendChild(tabletag);
		var i = j = 0;

		var oRows = oTable.insertRow(i);
		for(j=0;j<7;j++){
			var oCols = oRows.insertCell(j)//FF
			oCols.innerHTML = dayArray[j];
			oCols.style.background="yellow"
		}
		i++;
		for(;i<6;i++){
			oRows=oTable.insertRow(i)//FF
			//var oRows = oTable.appendChild();
			for(j=0;j<7;j++){
				var oCols = oRows.insertCell(j)//FF
				//oCols.innerHTML = i + "行" + j +"列";
				oCols.style.background="#eee"
			}
	　　}

		var plas = getDayOfWeek(today.getYear(),today.getMonth() + 1,1);
		var mondays = DayNumOfMonth(today.getYear(),today.getMonth() + 1);

		for(i=1;i<=mondays;i++)
		{

			var rnum = (plas + i)/7;
			if(rnum>parseInt(rnum)) 
				rnum = parseInt(rnum) + 1;
			else
				rnum = rnum;
			//alert(rnum);
			//oRows = oTable.getRow(rnum);
			var cnum = getDayOfWeek(today.getYear(),today.getMonth() + 1,i);
			//var oCols = oRows.getCell(cnum);
			oTable.rows[rnum].cells[cnum].innerHTML = i;



			oTable.rows[rnum].cells[cnum].onmouseover = function(){this.style.background="green"};

			oTable.rows[rnum].cells[cnum].onmouseout = function(){this.style.background="#eee";};
			if(i==today.getDate())
			{
				oTable.rows[rnum].cells[cnum].style.background="red"
				oTable.rows[rnum].cells[cnum].onmouseout = function(){this.style.background="red";};
			}

			//oTable.rows[rnum].cells[cnum].setAttribute("onclick", dblclick(rnum,cnum));;
		}

	}


    this.dblclick = function(i,j){
		alert(i + "," + j);
	}

    //alert(getDayOfWeek(day.getYear(),2,1));  //调用判断星期几的方法


	//alert(DayNumOfMonth(2012,02));
	function DayNumOfMonth(Year,Month) 
	{ 
	    var d = new Date(Year,Month,0); 
	    return d.getDate(); 
	}

	function getDayOfWeek(Year,Month,Day){ 
	    var dayValue = Year + "-" + Month + "-" + Day;
	    var day = new Date(Date.parse(dayValue.replace(/-/g, '/')));   //将日期值格式化 
	    return day.getDay();  //返一个星期中的某一天，其中0为星期日 
	}