關於ToDolist 的增刪改查 用jQuery來實現

Lurkers.發表於2018-05-29
jQuery

程式碼如下：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<title>todolist</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
color: #777;
}
i{
font-style: normal;
}
.contains{
width: 960px;
margin: 20px auto;
border: 2px solid #ddd;
padding: 30px;
}
.theme_color>h3{
font-family: STXingkai;
margin-bottom: 5px;
color: #81D8E6;
}
.btn_red{
width: 35px;
height: 35px;
background: #F52C2C;
border: none;
cursor: pointer;
}
.btn_green{
width: 35px;
height: 35px;
background:#3AB93A;
border: none;
cursor: pointer;
}
.btn_blue{
width: 35px;
height: 35px;
background: #81D8E6;
border: none;
cursor: pointer;
}
.btn_yello{
width: 35px;
height: 35px;
background: #E2E25F;
border: none;
cursor: pointer;
}
.time{
float: right;
}
.search{
margin-top: 10px;
}
.search input{
width: 666px;
height: 35px;
border-radius: 4px;
outline: none;
border: 1px solid  #DDDDDD;
}
.search_btn{
width: 60px;
height: 38px;
background: deepskyblue;
outline: none;
border: none;
border-radius: 4px;
margin-left: 5px;
cursor: pointer;
}
.content{
margin-top: 15px;
}
.content span{
color: #D80707;
}
.content i{
color: #1A8A1A;
}
.content_con{
   width: 930px;
   height: 100px;
   border: 1px solid #ddd;
   padding: 10px;
   margin-top: 10px;
   border-radius: 4px;
}

.content_con1{
   width: 930px;
   height: 100px;
   border: 1px solid #ddd;
   padding: 10px;
   margin-top: 10px;
   border-radius: 4px;
}
.content_con_time{
float: left;
margin-top:30px;
}
.content_con_chk{
float: right;
margin-top:40px;
}
.content_con_chk a{

}
.footer{
margin-top: 20px;
color: #888;
}

.footer_time{
margin-top: 35px;
}


.modal{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1050;
   overflow: hidden;
 /*  -webkit-overflow-scrolling: touch;*/
   outline: 0;
   width: 600px;
   margin: 0 auto;
   top: 200px;
   display: none;
}
.modal1{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1050;
   overflow: hidden;
 /*  -webkit-overflow-scrolling: touch;*/
   outline: 0;
   width: 600px;
   margin: 0 auto;
   top: 200px;
   display: none;
}

.show {
   display: block !important;
}
.modal-dialog{
   position: relative;
   width: auto;
   margin: 10px;
}
.modal-content{
   position: relative;
   background-color: #fff;
  /* -webkit-background-clip: padding-box;*/
   background-clip: padding-box;
   /*border: 1px solid #999;*/
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 6px;
   outline: 0;
   /*-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);*/
   box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-header{
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
}
.modal-body {
   position: relative;
   padding: 15px;
}
.modal-footer{
   padding: 15px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
}
.modal_close{
   background: none;
   border: none;
   color:rgba(153, 153, 153, 0.58);
   font-weight: bolder;
   float: right;
   font-size: 16px;
   cursor: pointer;
}
.modal-body_con{
float: left;
}
.modal-body_tex{
float: left;
margin-bottom: 10px;
}
.modal-footer{
clear: both;
}
textarea{
resize: none;
outline: none;
border:1px solid #DDDDDD;
border-radius: 4px;
}
.modal-footer_okbtn{
width: 58px;
height: 35px;
color: white;
background: darkcyan;
outline: none;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal-footer_nobtn{
width: 58px;
height: 35px;
color: white;
background:#626D28;
outline: none;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal-footer_okbtn1{
width: 58px;
height: 35px;
color: white;
background: darkcyan;
outline: none;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal-footer_nobtn1{
width: 58px;
height: 35px;
color: white;
background:#626D28;
outline: none;
border: none;
border-radius: 4px;
cursor: pointer;
}

.modal-body>h3{
color: darkred;
}
</style>
</head>
<body>
<div class="contains">
<div class="head">
<div class="time">
<span class="time_show">上午好！</span>
</div>
<div class="theme_color">
<h3>主題顏色選擇：</h3>
<p><button class="btn_red"> </button> <button class="btn_green"> </button> <button class="btn_blue"> </button> <button class="btn_yello"> </button></p>
</div>

</div>
<div class="search">
<div>
<input type="text" placeholder="請輸入你想要搜尋的內容..."  class="search_inp" /><button class="search_btn">傳送</button>
</div>
</div>
<div class="content">
<span class="waits">代辦事項：<strong>4</strong></span>
<i class="fin"> 已辦事項：<strong>0</strong></i>
<div class="content_con">
<p class="content_con_con">今天天氣非常好，太陽也很暖和，我們去游泳吧！</p>
<p class="content_con_time">2018-05-28</p>
<p class="content_con_chk"> <a href="#">檢視</a><input type="checkbox" /> </p>
</div>
<div class="content_con">
<p class="content_con_con">等你吃飯！</p>
<p class="content_con_time">2018-05-28</p>
<p class="content_con_chk"> <a href="#">檢視</a><input type="checkbox" /> </p>
</div>
<div class="content_con">
<p class="content_con_con">等你下課，不愛我就拉倒！！！</p>
<p class="content_con_time">2018-05-28</p>
<p class="content_con_chk"> <a href="#">檢視</a><input type="checkbox" /> </p>
</div>
<div class="content_con">
<p class="content_con_con">等你睡覺覺！</p>
<p class="content_con_time">2018-05-28</p>
<p class="content_con_chk"> <a href="#">檢視</a><input type="checkbox" /> </p>
</div>
</div>

<div class="footer">
<h2>歷史記錄</h2>

<!--<div class="content_con1">
<p>今天天氣非常好，太陽也很暖和，我們去游泳吧！今天一起非常好，太陽也很暖和，我們去游泳吧！今天一起非常好，太陽也很暖和，我們去游泳吧！</p>
<p class="footer_time">完成時間：2018-05-28。 晚上好！</p>
</div>


<div class="content_con1">
<p>今天天氣非常好，太陽也很暖和，我們去游泳吧！今天一起非常好，太陽也很暖和，我們去游泳吧！今天一起非常好，太陽也很暖和，我們去游泳吧！</p>
<p class="footer_time">完成時間：2018-05-28。 晚上好！</p>
</div>-->
</div>


</div>


<!--檢視模態框begin-->
<div class="modal ">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

<button class="modal_close">X</button>
<h3>修改管理</h3>
</div>
<div class="modal-body">
<div class="modal-body_con">
<p>內容：</p>
</div>
<div class="modal-body_tex">
<textarea cols="65" rows="10"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="modal-footer_okbtn">確定</button>
<button class="modal-footer_nobtn">取消</button> 
</div>
</div>
</div>
</div>
<div class="aa"></div>
<!--檢視模態框end-->


<!--完成模態框begin-->
<div class="modal1 ">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

<button class="modal_close">X</button>
<h3>修改管理</h3>
</div>
<div class="modal-body">
<h3>你確定完成了嗎？</h3>
</div>
<div class="modal-footer">
<button class="modal-footer_okbtn1">確定</button>
<button class="modal-footer_nobtn1" >取消</button>
</div>
</div>
</div>
</div>

<!--完成模態框end-->

<script>
//檢視 模態框彈出
var _this1=null
$(document).on("click",".content_con_chk a",function(){
_this1 = $(this)
$(".modal").show(300)
var _con = $(this).parents(".content_con").find(".content_con_con").text()
//console.log()
$(".modal").find("textarea").val(_con)


})

//檢視確定

$(document).on("click",".modal-footer_okbtn",function(){
//alert(123)
var _this_val= $(".modal").find("textarea").val();
_this1.parents(".content_con").find(".content_con_con").text(_this_val)

$(this).parents(".modal").hide(300)
})



$(document).on("click",".modal_close",function(){
$(".modal").hide(300)
})
$(document).on("click",".modal-footer_nobtn",function(){
$(".modal").hide(300)
})
$(document).on("click",".modal-footer_nobtn1",function(){
$(".modal1").hide(300)
})

//單選框 模態框 彈出
var _this = null
$(document).on("click",".content_con_chk input",function(){
$(".modal1").show(300)
_this = $(this)

})
$(document).on("click",".modal_close",function(){
$(".modal1").hide(300)
})
$(document).on("click",".modal-footer_nobtn",function(){
$(".modal1").hide(300)
})


//點選改變字型顏色
$(document).on("click",".btn_red",function(){
$(".content_con").addClass().css("color","#F52C2C")
})

$(document).on("click",".btn_green",function(){
$(".content_con").addClass().css("color","#3AB93A")
})

$(document).on("click",".btn_blue",function(){
$(".content_con").addClass().css("color","#81D8E6")
})

$(document).on("click",".btn_yello",function(){
$(".content_con").addClass().css("color","#E2E25F")
})


/*時間自動走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 mins = date.getMinutes();
var secs = date.getSeconds();
var weeks=date.getDay();
var times=years+'年'+months+'月'+dates+'日'+'    '+hours+':'+mins+':'+secs+' '+'星期'+weeks;
return times
}


//時間插入
var a = times();
$(".time_show").html(a)
setInterval(function(){
var a = times();
$(".time_show").html(a)
},1000)

/*時間自動走end*/


//傳送
var wait = 4;
$(document).on("click",".search_btn",function(){
var _val = $(".search_inp").val();


if($(".search_inp").val().length==0){
alert("輸入不能為空")
}else{
var str='<div class="content_con"><p class="content_con_con">'+_val+'</p><p class="content_con_time">'+times()+'</p><p class="content_con_chk"> <a href="#">檢視</a> <input type="checkbox"</p></div>'
$(".content").append(str);
wait++
$(".waits strong").html(wait);
$(".search_inp").val("");
}
})


//完成確定
/*$(document).on("click",".modal-footer_okbtn1",function(){
var _val = _this.parents(".content_con").find(".content_con_con").text()
//console.log(_this.parents(".content_con").find("p:eq(0)").text())
var str = '<div class="content_con1"><p>'+_val+'</p><p class="footer_time">完成時間：'+times()+'</p></div>'
$(".footer").append(str)
$(this).parents(".modal1").hide()
_this.parents(".content_con").hide(500)
})*/

var fin=0;
$(document).on("click",".modal-footer_okbtn1",function(){
//alert(123)
var _val=_this.parents(".content_con").find(".content_con_con").text()
//console.log(_val)
var str='<div class="content_con1"><p>'+_val+'</p><p class="footer_time">完成時間：'+times()+'</p></div>'
$(".footer").append(str)
$(this).parents(".modal1").hide(300)
_this.parents(".content_con").hide(500)

wait--
$(".waits strong").html(wait);

fin++
$(".fin strong").html(fin)



})


</script>
</body>
</html>



效果展示：



相關文章