<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>todolist_again</title> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } .fat { width: 500px; height: 800px; margin: 50px auto; } h1 { font-size: 38px; color: goldenrod; display: inline; margin-right: 40px; /* vertical-align: middle; */ } .todoinput { width: 300px; height: 50px; line-height: 50px; border-radius: 10px; border: 2px solid rgb(245, 161, 102); font-size: 28px; text-align: center; outline-style: none; /* outline-color: brown; */ /* input獲得焦點時，默認會出現一個藍色外邊框，設定outline屬性，或者border屬性，能清除該默認樣式 */ } h3 { font-size: 34px; float: left; } #todocount,#donecount { width: 30px; height: 40px; line-height: 40px; border-radius: 10px; background: goldenrod; display: block; float: right; margin-top: 2px; text-align: center; color:white; } .clearfix:after { display: block; height: 0; line-height: 0; content: ""; clear: both; visibility: hidden; } .clearfix { zoom: 1; } .main { margin-top: 40px; margin-bottom: 20px; } li { width: 100%; background: olive; border-radius: 7px; height: 30px; line-height: 30px; margin-top: 10px; list-style: none; position: relative; } #donelist li{ opacity: .6; } .check { width: 21px; height: 21px; margin-left: 10px; vertical-align: middle; } .content { color: white; margin-left: 28px; font-family: '宋體'; font-size: 18px; } .del { width: 16px; height: 16px; border-radius: 7px; background: orangered; display: block; position: absolute; right: 8px; top: 15px; margin-top: -8px; } </style></head><body> <section class="fat"> <section> <!-- οnfοcus="this.placeholder=''" οnblur="this.placeholder='添加todo'" --> <h1>todolist</h1><input type="text" placeholder="添加todo" class="todoinput"> </section> <section class="main"> <section class="clearfix"> <h3>正在進行</h3><span id="todocount"></span> </section> <ol id="todolist"> <!-- <li> <input type="checkbox" ><span >了jog了</span><a href="https://www.cnblogs.com/677a/p/###" ></a> </li> --> </ol> </section> <section class="main"> <section class="clearfix"> <h3>已完成</h3><span id="donecount"></span> </section> <ul id="donelist"> </ul> </section> </section> <script> $(function(){ // 每次重繪頁面，都要直接顯示原有的本地資料，即一重繪就將本地存盤中已有的資料渲染到頁面 load(); // input框獲得焦點時，清空placeholder $('.todoinput').focus(function() { $(this).prop("placeholder",""); // $(this).attr("style",'background:rgba(224,150,150,0.3);');//設定獲得游標時輸入框的背景顏色 }); // input框失去焦點時，設定placeholder $('.todoinput').blur(function() { $(this).prop("placeholder",'添加todo'); // $(this).attr("style",'background:;'); }); // 讀取本地存盤的資料，更新本地存盤資料，保存本地存盤資料，將本地存盤資料渲染到頁面 $('.todoinput').on('keydown',function(e) { // 回車事件 if(e.keyCode===13) { if($(this).val()=="") { alert("輸入內容不能為空！"); }else { // 先獲取本地存盤中的資料 var local = getData(); // 更新資料 local.push({title: $(this).val(),done:false}); // 更新后的資料保存到本地存盤 saveData(local); //渲染頁面 load(); $(this).val("");// 回車后要將input框的內容清空 $(this).prop("placeholder",'添加todo');//回車后回復placeholder // $(this).attr("style",'background:;');//回車后回復輸入框背景顏色 // 回車后如何失去游標？？？？？？？？？？？？？？？？ } } }); // 讀取本地存盤資料 function getData() { var data = localStorage.getItem("list");//讀取本地存盤中的資料，注意本地存盤的資料只能是字串格式 // -------------console.log(typeof(data));//string if(data !== null){//如果有資料，就將字串資料轉json物件并回傳資料 return JSON.parse(data);//JSON.parse()里面必須是一個字串 如果此處報錯，可能是data為undefined，可能是本地存盤中的資料格式錯誤，application清空資料即可 }else{//如果沒有資料就回傳一個空陣列 return []; } } // 保存本地存盤資料 注意本地存盤資料都是字串型別 function saveData(param) { localStorage.setItem("list",JSON.stringify(param)); }; // 加載本地存盤資料渲染到頁面中 function load() { var hh = getData();//獲取本地資料，得到的是字串陣列 // 回車事件呼叫渲染方法時，每次都將本地存盤的所有資料遍歷一遍添加進串列，如果不先清除串列的話，再加載又會重新渲染一次之前的資料，所以：遍歷本地存盤之前，先將ul,ol的資料清空 $('ul,ol').empty(); // 計算正在進行的事件數量，已經完成的事件數量 var todocount=0; var donecount=0; // 遍歷陣列 $.each(hh,function(i,n) { // 本地存盤里的資料分兩種，已經完成的和正在進行的 if(n.done==false){ // 如果遍歷到的當前元素是正在進行的資料，放入對應的ol中 $('ol').prepend("<li><input type='checkbox' class='check'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>"); todocount++;//每添加一個Li,count加1 }else if(n.done==true) { $('ul').prepend("<li><input type='checkbox' class='check' checked='false'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>"); donecount++; } }); // 將count值賦值給span 注意用val()無效 一重繪頁面就有資料，回車就有資料，所以寫在load()里面 $('#todocount').text(todocount); $('#donecount').text(donecount); }; // 點擊復選框，ul,ol的資料相互切換 修改done屬性，done為false就是正在進行，done為true就是已完成 $('ul,ol').on('click','input',function() { //獲取本地存盤資料 var data = getData(); // 找到當前li所對應的本地存盤中的資料，將該資料的done屬性修改 var index = $(this).siblings('a').attr('id');//獲取自定義屬性用attr() console.log($(this).prop('checked'));//被選中的復選框checked屬性為true console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被選中的復選框checked屬性為false //-----------------將復選框的checked屬性值賦給done false or true // ？為什么點擊正在進行的復選框不會勾選----------因為一點擊，就重新渲染頁面把該條資料給放到已完成串列了 data[index].done = $(this).prop('checked'); // 將具有新checked屬性的資料保存在本地存盤 saveData(data); // 重新渲染頁面 load(); }); // 點擊a標簽洗掉當前li ！！！！！！！！！！！！注意：不是洗掉頁面元素，而是從本地存盤中洗掉資料 $('ul,ol').on('click','a',function() {//注意！！！？？？？？直接用類名表示兩個串列中的a標簽會出問題，為什么？？？？？？？？？？？？？？？？？？？ var info = getData(); // 獲取到當前a的索引號，然后從本地存盤中找到相對應索引號的資料，洗掉 var index = $(this).attr("id"); // 洗掉陣列的某個元素用splice(陣列下標,個數) info.splice(index,1);//從索引index處開始，洗掉一個元素 saveData(info); load(); }); }) </script></body></html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34129.html
標籤：jQuery
上一篇：JqueryOn系結事件方法介紹