筑坐极_三天完成在线记事本小应用

项目名称:在线备忘录

开发者:睿萌萌

开发环境:HBuilder-X

有图有真相，叙述前先上图

三天完成在线记事本小应用

通过对日期对象的学习，能获取对应系统的时间和设置特定年月日，这样就可以完成对应的日期选择器，通俗点说就是日历啦~

当前小应用包含以下几点功能：

①、可以选择不同的年月日，会切换到对应的月份，显示对应的日历并完整对应星期；

②、选中一个日期后再文本域中输入需要记住的信息后，该信息会保存在浏览器的缓冲中，除非手动删除，不然就会一直存在；

③、当日期切换后，在不同日期选中后，如果当天有备忘信息就会展示出来，如果修改就会记录最新的信息值。

当前附上js代码：

$(function() {
	var weekarr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
	var thismonth = 0;
	var thisyear = 0;
	var ture = new Date();
	var tyear = ture.getFullYear();
	var tmonth = ture.getMonth() + 1;
	var tdate = ture.getDate();
	$("p.year").text(tyear);
	$("p.month").text(tmonth);
	a();

	$(".btn").click(function() {
		$("p.year").text(tyear);
		$("p.month").text(tmonth);
		a();
	})

	weekarr.forEach(function(val, index, xrr) {
		var $li = $("<li></li>");
		$li.text(val);
		$(".week").append($li);
	})

	for(var i = 1900; i < 2100; i++) {
		var $li = $("<li></li>");
		$li.text(i);
		$("ul.year").append($li);
		$li.click(function() {
			thisyear = $(this).text();
			$("p.year").text(thisyear);
			$(this).parent().slideUp();

			a();
		})

	}
	for(var i = 1; i < 13; i++) {
		var $li = $("<li></li>");
		$li.text(i);
		$("ul.month").append($li);
		$li.click(function() {
			thismonth = $(this).text();
			$("p.month").text(thismonth);
			$(this).parent().slideUp();

			a();
		})

	}

	function a() {
		$(".dates").empty();
		var x = new Date($("p.year").text(), $("p.month").text() - 1, 01);
		var xingqi = x.getDay();
		for(var i = 0; i < xingqi; i++) {
			var $li = $("<li></li>");
			$li.text(" ");
			$(".dates").append($li);
		}

		function createLi(k) {
			for(var i = 0; i < k; i++) {
				var $li = $("<li></li>");
				$li.text(i + 1);
				$(".dates").append($li);
				/*$li.click(function() {
					if($(this).text() != "") {
						$(this).addClass("change").siblings().removeClass("change")
						var ndate = new Date($("p.year").text(), $("p.month").text() - 1, $(this).text());
						console.log(ndate);
					}
				})*/
			}
		}
		if($("p.year").text() % 4 == 0 && $("p.year").text() % 100 != 0 || $("p.year").text() % 400 == 0) {
			if($("p.month").text() == 1 || $("p.month").text() == 3 || $("p.month").text() == 5 || $("p.month").text() == 7 || $("p.month").text() == 8 || $("p.month").text() == 10 || $("p.month").text() == 12) {
				createLi(31);
			} else if($("p.month").text() == 4 || $("p.month").text() == 6 || $("p.month").text() == 9 || $("p.month").text() == 11) {
				createLi(30);
			} else {
				createLi(29)
			}

		} else {
			if($("p.month").text() == 1 || $("p.month").text() == 3 || $("p.month").text() == 5 || $("p.month").text() == 7 || $("p.month").text() == 8 || $("p.month").text() == 10 || $("p.month").text() == 12) {
				createLi(31);
			} else if($("p.month").text() == 4 || $("p.month").text() == 6 || $("p.month").text() == 9 || $("p.month").text() == 11) {
				createLi(30);
			} else {
				createLi(28);
			}
		}
		if($("p.year").text() == tyear && $("p.month").text() == tmonth) {
			$(".dates li").eq(xingqi + tdate - 1).text(tdate).addClass("today").siblings().removeClass("today");
		}
		var xdate = new Date($("p.year").text(), $("p.month").text() - 1, $(".today").text());
		$(".note").val(localStorage.getItem(xdate.toDateString()));
		// $(".today")
		$(".dates>li").click(function() {
//					console.log($(this).text().length);
			if($(this).text() != " ") {
				$(this).addClass("change").siblings().removeClass("change")
				var ndate = new Date($("p.year").text(), $("p.month").text() - 1, $(this).text());
				//console.log(ndate);
			}
			$(".note").val(localStorage.getItem(ndate.toDateString()));
		})
		$(".save").click(function(){
			var ndate = new Date($("p.year").text(), $("p.month").text() - 1, $(".change").text());
			var note = $(".note").val();
			localStorage.setItem(ndate.toDateString(),note);
		})		
	}

	$("p.year").click(function() {
		event.stopPropagation();
		$(this).next().slideDown();
	})

	$(document).click(function() {
		$("ul.year").slideUp();
	})
	$("p.month").click(function() {
		event.stopPropagation();
		$(this).next().slideDown();
	})

	$(document).click(function() {
		$("ul.month").slideUp();
	})
})

供各位参考，同时也望小伙伴们指出其中的不足！

链接地址：http://xiaozhuqz.com/schedule/index.html

三天完成在线记事本小应用

许*

缓存，日期对象，日期选择器

利用缓存和日期对象，从0开始三天完成记事本小应用

2019.10.28

1204人

许*

天津市北辰区

Hot:7220

许*

当前作品暂无评分

还未获得评语哦~