ジョブの要件：
基本的なニーズ：85％
参照リンクhttp://www.todolist.cn/
1ユーザ入力はTO-行うアイテムに追加される
2 todolistのを分類することができる（TO-行うアイテムと完了群）を、ユーザにのみチェックされます完成されたグループに項目を行い、未完成となって完成し
、それぞれがtodolistのを削除し、編集することができます。3.
4.そこに明確なボタンが下向きであり、todolistのすべてのエントリクリア
5. HTML、CSS、JS、jqueryのを調製し15％：標準的な要件のコーディング1.コード対応のノート2.手順が文書化されたファイル（//github.com/csrftoken/vueDrfDemo README.md参照:: HTTPS）コンテンツ3.プログラムのマニュアルは含まれている必要がありますが：機能は、プログラムの起動モードがプログラムを実施し、プログラムの動作結果は、4プログラミングをフローチャート（ます。https：//www.processon.com/view/link/589eb841e4b0999184934329参照します）
プログラムディレクトリ部門：
CSS：スタイル
JS：JS
ToDoList.html：ウェブサイト
README.md：ドキュメント
結果を実現：
<!DOCTYPE html> <html> <head> <title>ToDoList-最简单的待办事项列表</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!--头部栏 --> <header> <section> <form action="javascript:void(0);" id="form"> <label for="title">ToDoList</label> <input type="text" name="title" id="title" placeholder="添加ToDo"> </form> </section> </header> <!-- 中间 --> <section> <h2>正在进行 <span id="todocount"></span></h2> <ol id="todolist" class="demo-box"> </ol> <h2>已经完成 <span id="donecount"></span></h2> <ul id="donelist"> </ul> </section> <!-- 脚部栏 --> <footer> 路飞学城todolist.cn <a href="javascript:;">clear</a> </footer> <script src="js/jquery-3.4.1.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
css代码：
body { margin:0; padding:0; font-size:16px; background: #CDCDCD; } header { height:50px; background:#333; background:rgba(47,47,47,0.98); } section{ margin:0 auto; } label{ float:left; width:100px; line-height:50px; color:#DDD; font-size:24px; cursor:pointer; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } header input{ float:right; width:60%; height:24px; margin-top:12px; text-indent:10px; border-radius:5px; box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset; border:none } input:focus{outline-width:0} h2{ position:relative; } span{ position:absolute; top:2px; right:5px; display:inline-block; padding:0 5px; height:20px; border-radius:20px; background:#E6E6FA; line-height:22px; text-align:center; color:#666; font-size:14px; } ol,ul{ padding:0; list-style:none; } li input{ position:absolute; top:2px; left:10px; width:22px; height:22px; cursor:pointer; } p{ margin: 0; } li p input{ top:3px; left:40px; width:70%; height:20px; line-height:14px; text-indent:5px; font-size:14px; } li{ height:32px; line-height:32px; background: #fff; position:relative; margin-bottom: 10px; padding:0 45px; border-radius:3px; border-left: 5px solid #629A9C; box-shadow: 0 1px 2px rgba(0,0,0,0.07); } ol li{ cursor:move; } ul li{border-left: 5px solid #999; opacity: 0.5; } li a{ position:absolute; top:2px; right:5px; display:inline-block; width:14px; height:12px; border-radius:14px; border:6px double #FFF; background:#CCC; line-height:14px; text-align:center; color:#FFF; font-weight:bold; font-size:14px; cursor:pointer; } footer{color:#666; font-size:14px; text-align:center; } footer a{ color:#666; text-decoration:none; color:#999; } @media screen and (max-device-width: 620px) {section{ width:96%; padding:0 2%; } } /*响应式 大于620px的时候显示下面的css样式*/ @media screen and (min-width: 620px) {section{ width:600px; padding:0 10px; } }
js代码：
$(function(){ //数据渲染视图,数据驱动视图 //加载数据的方法 function loadData(){ var collection = localStorage.getItem('todo'); if (collection) { return JSON.parse(collection); }else{ return []; } } //保存数据的方法 function saveData(data){ localStorage.setItem('todo',JSON.stringify(data)); } //更新数据 function update(i,key,value){ var data = loadData(); //删除 // var i = parseInt($(this).attr('index')); var todo = data.splice(i,1)[0]; //done-->true todo[key] =value; //替换 data.splice(i,0,todo); saveData(data); load(); } //加载网页的数据 load(); function load(){ var todoCount = 0; var doneCount = 0; var doneStr =''; var todoStr =''; var todoList = loadData(); if (todoList && todoList.length>0) { //有数据 todoList.forEach(function(data,i){ if(data.done){ //已经完成 doneStr +=`<li> <input type="checkbox" index=${i} checked="checked"> <p id='p-${i}' index=${i}>${data.title}</p> <a href="javascript:;">-</a> </li>`; doneCount++; }else{ //正在进行 todoStr +=`<li> <input type="checkbox" index=${i}"> <p id='p-${i}' index=${i}>${data.title}</p> <a href="javascript:;">-</a> </li>`; todoCount++; } $('#donelist').html(doneStr); $('#todolist').html(todoStr); $('#todocount').html(todoCount); $('#donecount').html(doneCount); }) }else{ //无数据 $('#todolist').html(''); $('#donelist').html(''); $('#todocount').html(todoCount); $('#donecount').html(doneCount); } } //添加数据的方法 $('#title').keydown(function(event){ if(event.keyCode ===13){ //获取输入框的值 var val = $(this).val(); if(!val){ alert('please input~') }else{ var data = loadData(); data.unshift({ title:val, done:false, }); //清空input $(this).val(''); //更新一下数据 saveData(data); load(); } } }) //事件代理的方式 删除数据的方法 $('#todolist').on('click','a',function(){ var data = loadData(); var i =$(this).parent().index(); //在数组中删除 data.splice(i,1); saveData(data); load(); }) $('#donelist').on('click','a',function(){ var data = loadData(); var i =$(this).parent().index(); //在数组中删除 data.splice(i,1); saveData(data); load(); }) //更新数据 $('#todolist').on('change','input[type=checkbox]',function(){ //获取li的索引 var i = parseInt($(this).attr('index')); //更新数据 update(i,'done',true); }) //编辑操作 $('#todolist').on('click','p',function(){ // var i =$(this).parent().index(); var i = parseInt($(this).attr('index')); console.log(i);// var title = $(this).html(); var $p=$(this); $p.html(`<input type='text' id='input-${i}' value=${title}>`); //获取焦点 选中 $（ `#input - $ {I}`）[0] .setSelectionRange（0、$（ `#input - $ {I}`）.val（）の長さ。）; $（ `#input - $ {I}`）.focus（）; //失去焦点 $（ `#input - $ {I}`）.blur（関数（）{ IF（$（この）.val（）長=== 0）{ $ p.html（タイトル）; }他の{ アップデート（I、 'タイトル'、$（この）.val（））; } }） }） }）