jQuery 和$.ajax 实现一个简单的ToDoList

先来看一下效果：

有哪里不足的，请大家多多指教！

代码结构如下：

	
		
		
		
		
		
	
	
		

			

				

					
主题颜色选择：
					

						

							
						
					
				
				

					

				
				

					添加
				
			
			

				

					
代办事项:0 
				
				

					
已完成事项:0 
				
			
			

				

					

						
					
				
			
			

				

					
历史记录
				
				

					

						
					
				
			
		
		

			
		
		
	

js代码：

$(function() {
	/*加载主体颜色*/
	$.ajax({
		type: "get",
		url: "data/to-do-color.json?" + Math.random(),
		async: true,
		success: function(res) {
			var str = "";
			for(var i = 0; i < res.length; i++) {
				str += '
'
			}
			$(".to-do-color ul").html(str);
			/*更换主题颜色*/
			var a = $(".to-do-color ul li");
			$.each(a,function(){
				$(this).click(function(){
					var _this = $(this).index();
					$(this).parents(".to-do").find(".to-do-wait").css("color",res[_this].color);
				})
			})

		}
	});
	
	/*数据初始化*/
	$.ajax({
		type: "get",
		url: "data/to-do.json?"+Math.random(),
		async: true,
		success: function(res) {
			var str = "";
			var len = res.length;
			for(var i = 0; i < len; i++) {
				str += '
' + res[i].content + '
' + res[i].time + '
查看完成
'
			}
			$(".wait ul").html(str);
		}
	});
	
	
	/*时间函数begin*/
	function times() {
		var date = new Date();
		var years = date.getFullYear();   	/*获取年*/
		var months = date.getMonth() + 1; 	/*获取月*/
		var dates = date.getDate();	 		/*获取日*/
		var hours = date.getHours();	 	/*获取时*/
		var min = date.getMinutes() 		/*获取分*/
		var sec = date.getSeconds() 		/*获取秒*/
		var times = years + '-' + months + '-' + dates + ' ' + hours + ':' + min + ':' + sec;
		return times;
	}
	/*时间函数end*/

	/*头部时间*/
	var a = times()
	$(".to-do-header-right").html(a)
	setInterval(function(){
		var a = times()
		$(".to-do-header-right ").html(a)
	},1000)
	


	/*modal begin*/
	function modal(options) {
		var deafults = {
			title:'查看修改' ,
			modal_body:'
内容:
',
			btn:'确定'
		}
		
		var options = $.extend(deafults,options);
		var str = '
'+options.title+'
x
'+options.modal_body+'
'+options.btn+'取消
'
		
		$(".modal_box").html(str);
		
	}
	

	function modal_show(res) {
		res.parents().find(".modal").fadeIn();
	}

	function modal_hide(res) {
		res.parents(".modal").fadeOut();
	}
	
	/*colse begin*/
	
	$(document).on("click", "#close", function() {
		modal_hide($(this));
	})
	
	/*colse end*/

	/*cancel begin*/
	
	$(document).on("click", ".cancel", function() {
		modal_hide($(this));
	})
	
	/*cancel end*/
	
	
	/*modal end*/

	
	/*代办事项begin*/
	var waits = 4 ;
	$(".waiting h4 span").html(waits);
	
	/*查看 begin*/
	var _this_check = null ;
	$(document).on("click", ".check", function() {
		modal();
		modal_show($(this));
		_this_check = $(this);
		/*var str = '
内容:
';
		$(".modal-body").html(str);*/
		var txt = $(this).parents(".to-do-content").find(".to-do-body").text();
		$(".modal textarea").val(txt);
		
	})
	/*查看 end*/
	
	
	/*确定修改 begin*/
	$(document).on("click",".sure",function(){
		var txt = $(this).parents(".modal").find(".check-txt textarea").val();
		$(_this_check).parents(".wait_1").find(".to-do-body").text(txt);
		modal_hide($(this));
	})
	/*确定修改 end*/
	
	/*代办事项end*/
	
	
	/*完成事项 begin*/
	
	var finish = 0 ;
	$(".done h4 span").html(finish);
	
	/*finish begin*/
	
	var _this_finish = null ;
	var _this_li = ""
	$(document).on("click", ".finish", function() {
		modal({
			title:'完成' ,
			modal_body:'
你确定完成了吗？
',
			btn:'确定'
		})
		modal_show($(this));
		_this_finish = $(this);
		_this_li = $(this).parents(".to-do-content").find(".to-do-body").text();
	})
	/*finish end*/
	
	/*确定完成 begin*/
	$(document).on("click",".sure_1",function(){
		var str = '
'+_this_li+'
完成时间:'+times($(".to-do-fin-footer h4 span"))+' 
';
		$(".finish_1 ul").append(str);
		modal_hide($(this));
		_this_finish.parents(".wait_1").remove();
		waits--;
		$(".waiting h4 span").html(waits);
		finish++;
		$(".done h4 span").html(finish);
	})
	/*确定完成 end*/
	/*完成事项 end*/
	
	/*添加事项 begin*/
	$(document).on("click",".add",function(){
		var _val = $("input[name=content]").val();
		
		if(_val.length==0){
			alert("请添加事项")
		}else{
			var str = '
' + _val + '
' + times()+ '
查看完成
'
			$(".wait ul").append(str);
			waits++;
			$(".waiting h4 span").html(waits);
			 $("input[name=content]").val("");
		}
	
		
	})
	/*添加事项 end*/
	
})

json数据：

to-do.json

[
	{"content":"今天是个好日子","time":"2018-05-28 16:05:55"},
	{"content":"今天是个好好日子","time":"2018-05-28 16:06:11"},
	{"content":"今天是个好好好日子","time":"2018-05-28 16:07:07"},
	{"content":"今天是个好好好好日子","time":"2018-05-28 16:08:08"}
]

to-do-color.json

[
	{"color":"#555"},
	{"color":"#a94442"},
	{"color":"#337ab7"},
	{"color":"#5cb85c"},
	{"color":"#8a6d3b"}
]