先来看一下效果：
有哪里不足的，请大家多多指教！
代码结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/base.js" ></script>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #337ab7;
}
ul li{
list-style: none;
cursor: pointer;
}
i,em,strong{
font-style: normal;
}
h1,h2,h3,h4,h5,h6{
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
font-family: inherit;
color: inherit;
}
input,button,select,textarea{
outline:none;
}
button{
overflow: visible;
font: inherit;
}
body{
font-family: "微软雅黑";
color: #555;
}
/*公共样式*/
.form-group{
margin-right: -15px;
margin-left: -15px;
}
.form-control{
display: inline-block;
width: 90%;
height: 28px;
padding: 3px 12px;
font-size: 14px;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 2px 2px 4px #ddd;
}
.btn{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-def{
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-info{
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-danger{
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-success{
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.text-danger{
color: #a94442;
}
.text-success{
color: #5cb85c;
}
.text-info{
color: #337ab7;
}
.text-erro{
color: #8a6d3b;
}
.text-muted {
color: #777;
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.clear{
clear: both;
}
/*公共样式end*/
.to-do{
width: 800px;
margin: 20px auto;
border:1px solid #ddd;
padding: 20px;
border-radius: 4px;
}
.to-do-header-left{
float: left;
}
.to-do-header-right{
float: right;
}
.to-do-color ul li{
display: inline-block;
width: 40px;
height: 40px;
margin-right: 5px;
}
.to-do-header-input input{
margin-top: 10px;
margin-bottom: 5px;
}
.to-do-content{
width: 97%;
padding: 6px 12px;
border: 1px solid #CCCCCC;
border-radius:4px ;
box-shadow: 2px 2px 4px #ddd;
font-size: 14px;
margin-top: 5px;
margin-bottom: 15px;
}
.to-do-action a{
margin-right: 5px;
}
/*模态框 begin*/
.modal{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.55);
display: none;
}
.modal-dialog{
width: 600px;
margin: 30px auto;
position: relative;
}
.modal-content{
position: relative;
background: #FFFFFF;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
}
.modal-header{
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-title{
margin: 0;
line-height: 1.42857143;
}
.modal-body{
position: relative;
padding: 15px;
}
.modal-footer{
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer button{
margin-right: 5px;
}
.modal-header .clear{
margin-top: -2px;
}
.close{
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .2;
}
button.close{
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}
.modal-body textarea{
resize: none;
padding: 6px;
margin-left: 5px;
border-radius: 4px;
}
/*模态框 end*/
</style>
</head>
<body>
<div class="to-do clear">
<div class="to-do-header clear">
<div class="to-do-header-left ">
<h4>主题颜色选择：</h4>
<div class="to-do-color">
<ul>
<!--加载to-do-color.json-->
</ul>
</div>
</div>
<div class="to-do-header-right ">
<h4></h4>
</div>
<div class="to-do-header-input clear">
<input type="text" class="form-control " name="content" placeholder="请输入代办事项"/><button type="button" class="btn btn-info add">添加</button>
</div>
</div>
<div class="to-do-hint ">
<div class="waiting">
<h4 class="text-danger">代办事项:<span>0</span> </h4>
</div>
<div class="done">
<h4 class="text-success">已完成事项:<span>0</span> </h4>
</div>
</div>
<div class="to-do-wait ">
<div class=" wait">
<ul>
<!--json数据的初始化-->
</ul>
</div>
</div>
<div class="to-do-finish">
<div class="to-do-fin-header">
<h1 class="text-info">历史记录</h1>
</div>
<div class="text-muted finish_1">
<ul>
<!--历史记录-->
</ul>
</div>
</div>
</div>
<div class="modal_box">
<!--模态框-->
</div>
</body>
</html>
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 += '<li style="background: ' + res[i].color + ';"></li>'
}
$(".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 += '<li class="to-do-content wait_1"><div class="to-do-body "><p>' + res[i].content + '</p></div><div class="to-do-con-footer "><div class="to-do-time pull-left "><h4>' + res[i].time + '</h4></div><div class="to-do-action pull-right"><a href="javascript:;" class="btn btn-info check">查看</a><a href="javascript:;" class="btn btn-success finish">完成</a></div></div><div class="clear"></div></li>'
}
$(".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:'<div class="check-txt"><h4 class="pull-left">内容:</h4><textarea class="pull-left" cols="64" rows="12"></textarea><div class="clear"></div></div>',
btn:'<button type="button" name="sure" class="btn btn-info sure">确定</button>'
}
var options = $.extend(deafults,options);
var str = '<div class="modal" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">'+options.title+'</h4><button type="button" class="close" id="close">x</button></div><div class="modal-body">'+options.modal_body+'</div><div class="modal-footer">'+options.btn+'<button type="button" name="cancel" class="btn btn-danger cancel">取消</button></div></div></div></div>'
$(".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 = '<div class="check-txt"><h4 class="pull-left">内容:</h4><textarea class="pull-left" cols="64" rows="12"></textarea><div class="clear"></div></div>';
$(".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:'<div class="finish-txt"><h4>你确定完成了吗？</h4></div>',
btn:'<button type="button" name="sure" class="btn btn-info sure_1">确定</button>'
})
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 = '<li class="to-do-content finish_1"><div class="to-do-fin-body"><p>'+_this_li+'</p></div><div class="to-do-fin-footer"><h4>完成时间:<span>'+times($(".to-do-fin-footer h4 span"))+'</span> </h4></div></li>';
$(".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 = '<li class="to-do-content wait_1"><div class="to-do-body "><p>' + _val + '</p></div><div class="to-do-con-footer "><div class="to-do-time pull-left "><h4>' + times()+ '</h4></div><div class="to-do-action pull-right"><a href="javascript:;" class="btn btn-info check">查看</a><a href="javascript:;" class="btn btn-success finish">完成</a></div></div><div class="clear"></div></li>'
$(".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"}
]