【ife】任务四十一:UI组件之日历组件(二)

2017-01-13 19:21:02来源:CSDN作者:zhouziyu2011人点击

var table = document.getElementsByTagName("table")[0];var tds = table.getElementsByTagName("td");var month = document.getElementById("month");var year = document.getElementById("year");var changeDay = document.getElementById("changeDay");var changeMonth = document.getElementById("changeMonth");var changeYear = document.getElementById("changeYear");var left = document.getElementById("left"); var right = document.getElementById("right");var input = document.getElementsByTagName("input")[0];var img = document.getElementsByTagName("img")[0];var calendar = document.getElementById("calendar");window.onload = function() {	var monthText = "";	var text = "";	for (var i = 1; i <= 12; i++) {		monthText += "<option value=" + i + "月>" + i +"月</option>"; 		text += "<option value=" + i + ">" + i +"</option>";	}	month.innerHTML = monthText;	changeMonth.innerHTML = text;	var yearText = "";	for (var i = 1990; i <= 2090; i++)		yearText += "<option value=" + i + ">" + i +"</option>";	year.innerHTML = yearText;	changeYear.innerHTML = yearText;	month.onchange = function() {		showDate(parseInt(year.value), month.value.slice(0, -1), 1);	}	year.onchange = function() {		showDate(parseInt(year.value), month.value.slice(0, -1), 1);	}	showchangeDay(1990, 1); 	changeMonth.onchange = function() { 		showchangeDay(changeYear.value, changeMonth.value);	}	changeYear.onchange = function() { 		showchangeDay(changeYear.value, changeMonth.value);	}	left.onclick = function() {		if (month.value.slice(0, -1) > "1")			month.value = month.value.slice(0, -1) -'0' - 1 + "月";		else {			month.value = "12月";			year.value = parseInt(year.value) - 1;		}		showDate(parseInt(year.value), month.value.slice(0, -1), 1);	}	right.onclick = function() {		if (month.value.slice(0, -1) != "12") 			month.value = month.value.slice(0, -1) -'0' + 1 + "月";		else {			month.value = "1月";			year.value = parseInt(year.value) + 1;		}		showDate(parseInt(year.value), month.value.slice(0, -1), 1); 	}	var date = new Date();	year.value = date.getFullYear(); 	month.value = date.getMonth() + 1 + "月"; 	showDate(date.getFullYear(), date.getMonth() + 1, date.getDate()); 	for (var i = 0; i < tds.length; i++) {		tds[i].onclick = function() {			var value = ""; 			switch(this.getAttribute("name")) { 				case "last":					if (month.value == "1月") {						value = value + (parseInt(year.value) - 1) + "-12-" + this.firstChild.nodeValue;						year.value = parseInt(year.value) - 1;						month.value = "12月";						showDate(parseInt(year.value) - 1, 12, this.firstChild.nodeValue);					}					else { 						value = value + parseInt(year.value) + "-" + (month.value.slice(0, -1) - '0' - 1) + "-" + this.firstChild.nodeValue;							month.value = month.value.slice(0, -1) - '0' - 1 + "月";						showDate(parseInt(year.value), month.value.slice(0, -1), this.firstChild.nodeValue);					}					break;				case "current":					value = value + parseInt(year.value) + "-" + month.value.slice(0, -1) + "-"  + this.firstChild.nodeValue; 					showDate(parseInt(year.value), month.value.slice(0, -1), this.firstChild.nodeValue);					break;				case "next":					if (month.value == "12月") { 						value = value + (parseInt(year.value) + 1) + "-1-" + this.firstChild.nodeValue;						year.value = parseInt(year.value) + 1;						month.value = "1月";						showDate(parseInt(year.value) + 1, 1, this.firstChild.nodeValue);					}					else { 						value = value + parseInt(year.value) + "-" + (month.value.slice(0, -1) - '0' + 1) + "-" + this.firstChild.nodeValue;						month.value = month.value.slice(0, -1) - '0' + 1 + "月";							showDate(parseInt(year.value), month.value.slice(0, -1), this.firstChild.nodeValue);					}					break;			}			input.value = value; 			calendar.style.display = "none"; 		}	}	document.getElementsByTagName("button")[0].onclick = function() {		showDate(changeYear.value, changeMonth.value, changeDay.value); 		year.value = changeYear.value; 		month.value = changeMonth.value + "月"; 		input.value = changeYear.value + "-" + changeMonth.value + "-" + changeDay.value; 		for (var i = 0; i < tds.length; i++) {			if (changeDay.value == tds[i].firstChild.nodeValue && tds[i].getAttribute("name") == "current")				tds[i].style.background = "#dddddd";		}		calendar.style.display = "block"; 	}	img.onclick = function() {		if (calendar.style.display == "none")			calendar.style.display = "block";		else			calendar.style.display = "none";	}	input.onclick = function() {		if (calendar.style.display == "none")			calendar.style.display = "block";		else			calendar.style.display = "none";	}	function showchangeDay(year, month) {		changeDay.innerHTML = "";		var dayText = "";		var days = new Date(year, month, 0).getDate(); 		for (var i = 1; i <= days; i++)			dayText += "<option value=" + i + ">" + i +"</option>";		changeDay.innerHTML = dayText;	}	function showDate(year, month, day) {		var firstDay = new Date();		firstDay.setFullYear(year, month - 1, 1);		var weekday = firstDay.getDay();		var tdBegin = 0; 		if (weekday == 0)  			tdBegin = 7;		for (var i = 0; i < 42; i++) {			tds[i].innerHTML = "";			tds[i].style.color = "#000000"; 			tds[i].style.background = "#ffffff"; 		}		var days = new Date(year, month, 0).getDate();		for (var i = 0; i < (weekday + tdBegin); i++) { 			var temp = new Date();			temp.setFullYear(year, month - 1, -i); 			tds[(weekday + tdBegin) - i - 1].innerHTML = temp.getDate();			tds[(weekday + tdBegin) - i - 1].style.color = "#aaaaaa"; 			tds[(weekday + tdBegin) - i - 1].setAttribute("name", "last");		}		for (var i = 1; i <= days; i++) { 			var temp = new Date();			temp.setFullYear(year, month - 1, i);			tds[weekday + tdBegin].innerHTML = temp.getDate(); 			tds[weekday + tdBegin].setAttribute("name", "current"); t			if (temp.getDate() == day)				tds[weekday + tdBegin].style.background = "#dddddd";			weekday++;		}		for (var i = 0; i < 42 - (weekday + tdBegin); i++) {			var temp = new Date();			temp.setFullYear(year, month - 1, days + i + 1); 			tds[(weekday + tdBegin) + i].innerHTML = temp.getDate(); 			tds[(weekday + tdBegin) + i].style.color = "#aaaaaa";			tds[(weekday + tdBegin) + i].setAttribute("name", "next"); 		}	}}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台