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

2017-01-13 11:40:17来源: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];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(year.value, month.value.slice(0, -1), 1);	}	year.onchange = function() {		showDate(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--;		}		showDate(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++;		}		showDate(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()); 	input.value = 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 + (year.value - 1) + "-12-" + this.firstChild.nodeValue;						year.value--;						month.value = "12月";						showDate(year.value - 1, 12, this.firstChild.nodeValue);					}					else { 						value = value + year.value + "-" + (month.value.slice(0, -1) - '0' - 1) + "-" + this.firstChild.nodeValue;							month.value = month.value.slice(0, -1) - '0' - 1 + "月";						showDate(year.value, month.value.slice(0, -1) - '0' - 1, this.firstChild.nodeValue);					}					break;				case "current":					value = value + year.value + "-" + month.value.slice(0, -1) + "-"  + this.firstChild.nodeValue; 					showDate(year.value, month.value.slice(0, -1), this.firstChild.nodeValue);					break;				case "next": 					if (month.value == "12月") {						value = value + (year.value + 1) + "-1-" + this.firstChild.nodeValue;						year.value++;						month.value = "1月";						showDate(year.value + 1, 1, this.firstChild.nodeValue);					}					else { 						value = value + year.value + "-" + (month.value.slice(0, -1) - '0' + 1) + "-" + this.firstChild.nodeValue;						month.value = month.value.slice(0, -1) - '0' + 1 + "月";							showDate(year.value, month.value.slice(0, -1) - '0' + 1, this.firstChild.nodeValue);					}					break;			}			input.value = value; 		}	}	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";		}	}	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"); 			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

最新摄影

微信扫一扫

第七城市微信公众平台