【ife】任务四十二：UI组件之日历组件（三）

最新推荐文章于 2021-04-25 12:09:11 发布
最新推荐文章于 2021-04-25 12:09:11 发布
阅读量404 收藏
点赞数 1
文章标签： 百度前端技术学院 ife HTML CSS JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouziyu2011/article/details/54410696
版权 
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.getElementById("date");
var dateBegin = document.getElementById("dateBegin");
var dateEnd = document.getElementById("dateEnd");
var calendar = document.getElementById("calendar");
var certain = document.getElementById("certain");
var cancel = document.getElementById("cancel");
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()); 
	function bindOneDate() {
		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"; 
			}
		}
	}
	function bindSomeDate() {
		var selectNum = 0;
		var firstDate;
		for (var i = 0; i < tds.length; i++) {
			tds[i].onclick = function() {
				dateBegin.value = "";
				dateEnd.value = "";
				if (this.getAttribute("name") != "current") {
					alert("请选择当月日期");
					return;
				}
				selectNum++;
				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;
				}
				if (selectNum == 1)
					firstDate = value;
				else { 
					if (judgeDate(firstDate, value) == -1) {
						dateBegin.value = firstDate;
						dateEnd.value = value;
					}
					else{
						dateBegin.value = value;
						dateEnd.value = firstDate;
					}
					selectNum = 0;
				}
			}
		}
	}
	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";
		certain.style.display = "none";
		cancel.style.display = "none";
		bindOneDate();
	}
	input.onclick = function() {
		if (calendar.style.display == "none") {
			calendar.style.display = "block";
			certain.style.display = "none"; 
			cancel.style.display = "none"; 
			bindOneDate();
		}
		else
			calendar.style.display = "none";
	}
	dateBegin.onclick = function() {
		if (calendar.style.display == "none") {
			calendar.style.display = "block";
			certain.style.display = "block";
			cancel.style.display = "block";
			bindSomeDate();
		}
		else
			calendar.style.display = "none";
	}
	dateEnd.onclick = function() {
		if (calendar.style.display == "none") {
			calendar.style.display = "block";
			certain.style.display = "block";
			cancel.style.display = "block"; 
			bindSomeDate();
		}
		else
			calendar.style.display = "none";
	}
	certain.onclick = function() {
		var flag = 0;
		if (dateBegin.value != "" && dateEnd.value != "") {
			for (var i = 0; i < tds.length; i++) {
				if (judge(dateBegin.value, tds[i])) {
					tds[i].style.background = "#cccccc";
					flag = 1;
				}
				if (judge(dateEnd.value, tds[i])) {
					tds[i].style.background = "#cccccc";
					flag = 0;
				}
				if (flag == 1)
					tds[i].style.background = "#cccccc";
			}
		}
		else
			alert("请选择起止日期");
	}
	cancel.onclick = function() {
		dateBegin.value = "";
		dateEnd.value = "";
		bindSomeDate();
		for (var i = 0; i < tds.length; i++) 
			tds[i].style.background = "#ffffff";
	}
	function judge(value, td) {
		var values = value.split("-");
		if (td.firstChild.nodeValue != values[2])
			return false;
		if (td.getAttribute("name") != "current") 
			return false;
		return true;
	}
	function judgeDate(date1, date2) {
		var date_1 = date1.split("-");
		var date_2 = date2.split("-");
		if (parseInt(date_1[2]) == parseInt(date_2[2]))
			return 0;
		else if (parseInt(date_1[2]) > parseInt(date_2[2]))
			return 1;
		else
			return -1;
	}
	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");
		}
	}
}
筱葭
关注
【ife】任务四十：UI组件之日历组件（一）
筱葭的博客
01-13 594
var table = document.getElementsByTagName("table")[0]; var tds = table.getElementsByTagName("td"); window.onload = function() { var month = document.getElementById("month"); var year = document.getE
前端网站资源精编！！
qianduan666a的博客
07-16 9208
前端网站资源精编！！ 目录: 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- Angularjs 5-------- ES6 6-------- React 7-------- 移动端API 8-------- avalon 9-------- Requriejs 10-------- vue 11-------- Seajs 12-------- Less,sass 13-------- Markdown 14-------- D3
日历组件的编写--html/css/js
哆来咪er的博客
08-30 1166
我们经常看到的旅游类的网站都会看到日期和时间，如订购火车票、机票等。想要通过原生的html/css/js来完成一个组件的开发。1、用html和css编写静态UI2、用js获取日历的数据并完成渲染3、事件绑定处理前端组件的基本构成和编写模式待续……
JavaScript案例精解（五）
德仔
11-19 1558
  JavaScript案例精解（五）2008年07月04日 星期五 08:48日历运行效果：思路：这个例子的思路总体有两个难点：1、计算任意月份的第一天是星期几，即日历显示时，当前月份对应星期几2、日历窗口的层(、)的构造，及其相应的事件(点击日期号填写当前的日期，点击年份选择年份，点击月份选择月份)。在解决第一个问题时：我们选确定好1900-1-1是星期
【ife】任务四十一：UI组件之日历组件（二）
筱葭的博客
01-13 336
var table = document.getElementsByTagName("table")[0]; var tds = table.getElementsByTagName("td"); var month = document.getElementById("month"); var year = document.getElementById("year"); var changeD
前端汇总（转载）
yuanbotao219的博客
01-14 9246
文章目录前端汇总一、概要二、优秀的网站三、前端技术分类综合四、各类前端资源综合类入门类工具类综合效果搜索平台团队Blog开发中心Nodejs综合APIEcmascriptVueAngularjsReactWebpackGulpJs templateHTML5(HTML)CSS3(CSS)移动端APIjQueryD3RequriejsSeajsLess,sassMarkdown兼容性UI相关其它AP......
前端涉及框架体系
Jenny
09-21 5468
前端涉及框架体系
前端资料大全
weixin_55356940的博客
04-25 5136
前端资源（一入前端深似海） 前端知识体系http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构https://github.com/JacksonTian/fks Web前端开发大系概览https://github.com/unruledboy/WebFrontEndStack Web前端开发大系概览-中文版http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html We...
资料_前端_精编
浮云梦影的博客
02-08 2963
我的前端资料整理,点击目录就可以直接跳转了,方便查阅
ife_summer_mob:ife移动网络应用程序的夏季培训
05-09
ife_summer_mob ##百度前端技术学院-暑假训练营（移动扬帆班） ###v1.0 包含的库：zepto.js、artTemplate.js、echarts-all.js ####缺点： 1.通过两个页面实现整个功能，没有做成单页面（以后有时间的话考虑改成单...
IFE_Game_yunbao:百度ife元宝游戏
05-19
《IFE(Game)_yunbao: 百度IFE元宝游戏详解》 在互联网技术发展的大潮中，JavaScript作为前端开发的重要语言，扮演着不可或缺的角色。本文将深入解析“IFE(Game)_yunbao”项目，这是一个由百度IFE（Interactive ...
【ife】任务三十二：表单（四）实现表单自动生成工厂
筱葭的博客
01-10 440
var inputs = document.getElementsByTagName("input"); var divs = document.getElementsByTagName("div"); window.onload = function() { nameValidator(); passwordValidator(); confirmPasswordValidator();
【ife】任务四十五：多功能相册之木桶布局
筱葭的博客
01-14 812
var imgs = [ {"src": "images/task45_1.jpg", flag: 0}, {"src": "images/task45_2.jpg", flag: 0}, {"src": "images/task45_3.jpg", flag: 0}, {"src": "images/task45_4.jpg", flag: 0}, {"
基于java的校园美食交流系统设计与实现.docx
09-19
基于java的校园美食交流系统设计与实现.docx
#_ssm_126_mysql_实习支教中小学学校信息管理系统_.zip
09-19
均包含代码，文章，部分项目包含ppt
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip
最新发布
09-19
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip 个人大四的毕业设计、课程设计、作业、经导师指导并认可通过的高分设计项目，评审平均分达96.5分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 [资源说明] 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），供学习参考。
ASP.NET公交车管理系统的实现与设计(源代码+论文).zip
09-19
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下载 4使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、 4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
ASP基于WEB楼宇专业网站毕业设计(源代码+论文).zip
09-19
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.m或d论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 、1资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
高通ISP技术解析：图像处理组件与降噪机制
"这篇文档是关于高通ISP（Image Signal Processor）的学习笔记，重点讨论了ISP的主要组件，数据流处理，以及BPC/BCC/PDPC等降噪技术在ISP中的应用。" 高通ISP是图像信号处理器，是手机、摄像头等设备中处理图像信号...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值