一個簡單的todolist，記錄我的前端第一步
阿新 • • 發佈：2019-02-05
啦啦啦
效果如下地址：
body { line-height: 1; font-family: "Lato", sans-serif; background-color: #EFF1F2; } .todo{ width: 70%; margin: 1em auto 3em; border: 1px solid #efefef; background-color:aquamarine; } .thing-input { border: 1px solid #dedede; padding-left: 10px; width: 70%; height: 35px; color: #555; } .clearList{ color: #555; background-color:darkkhaki; width: 100px; height: 38px; cursor: pointer; font-size: 14px; } .listul ul li input,ul, li { margin: 0; padding: 0; border: 0; } .list li{ border: 1px solid #dedede; width: 70%; height: 35px; color: #555; font-size: 30px; background-color:salmon; list-style:none } .list li button{ background-color: transparent; border: 1px solid #3465A4; color: #ddd; visibility: hidden; font-size: 20px; font-weight: bold; } .list li:hover > button { visibility: visible; } .list li label { display: inline-block; width: 70%; font-size: 20px; line-height: 24px; color: #fcfcfc; z-index: 2; overflow: hidden; }
<html> <body onload="initList();"> <div class="todo"> <input type="text" placeholder="在此輸入你將要做的事情按回車鍵結束" id="thing" class="thing-input" onkeypress="getKey();"> <input type="button" value="清除列表" class="clearList" onclick="delectAll();"> <br> <br> <br> <section class="list"> <input type="checkbox" id="selectall" onclick="select_cancelAll();">選擇全部 <ul class="list-item" id="listul"> </ul> </section> </div> </body> </html>
function Todo(thing,time){ this.thing=thing; this.time=time; } var todo1=new Todo("給老婆打電話","9：00"); var todo2=new Todo("下班去市場買菜","12：00"); var todo3=new Todo("上班","14：00"); var mylist=[todo1,todo2,todo3]; console.log(todo1); //新增事件,引數用於新增在label標籤 function add(labelText){ //新增li標籤 var para=document.createElement("li"); var element=document.getElementById("listul"); element.appendChild(para); //往新的li標籤新增複選框 var inp=document.createElement("input"); inp.type="checkbox"; inp.onclick = isAll; element.lastChild.appendChild(inp); //往新的li標籤新增label var lb=document.createElement("label"); lb.appendChild(document.createTextNode(labelText)); element.lastChild.appendChild(lb); //往新的li標籤新增刪除按鈕 var butt=document.createElement("button"); butt.appendChild(document.createTextNode("刪除")); element.lastChild.appendChild(butt); butt.onclick=function(){ butt.parentNode.parentNode.removeChild(butt.parentNode); }; } //初始化todolist function initList(){ console.log(mylist.length); for(var i=0;i<mylist.length;i++){ add(mylist[i].time+mylist[i].thing); } } //新增 function addListDo(){ var labelText=document.getElementById("thing").value; if(labelText==""||labelText==null)return; else{ //呼叫新增函式 add(labelText); //將輸入框重置 document.getElementById("thing").value=""; } } function getKey() { if(event.keyCode===13){ addListDo(); } } //刪除全部 function delectAll(){ var listul=document.getElementById("listul"); listul.innerHTML=""; } //選擇全部的複選框onclick響應事件 function select_cancelAll(){ var sel=document.getElementById("selectall"); if(sel.checked){ var item=document.getElementById("listul"); var items=item.getElementsByTagName("input"); for(var i=0;i<items.length;i++){ items[i].checked=true; } } else{ var item=document.getElementById("listul"); var items=item.getElementsByTagName("input"); for(var i=0;i<items.length;i++){ items[i].checked=false; } } } //是否全部被選中 function isAll(){ var sel=document.getElementById("selectall"); if(this.checked==false){ sel.checked = false; return; } else{ var item=document.getElementById("listul"); var items=item.getElementsByTagName("input"); for(var i=0;i<items.length;i++){ if(items[i].checked==false){ return; } } sel.checked = true; } }