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

许睿

2019.10.28

119人浏览

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

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

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

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

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

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

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

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

    当前附上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

许睿    102 天津市北辰区 设计师杨冰是女孩 1997.08.16
设计师啪啪网2019版