#學習筆記#(36)JS初步實現todolist新增任務功能
阿新 • • 發佈：2019-02-18
html檔案程式碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Personal Manager</title> <link href="PMstyle.css" rel="stylesheet"/> </head> <body> <div class="tasks-box" id="tasksbox"> <div class="task"> <input type="text" id="taskcontent" placeholder="請在這裡輸入任務內容" /> <button id="addbtn" onclick="addtask()">新增</button> </div> <h3>任務列表</h3> <div id="list"></div> </div> <script src="PM.js"></script> </body> </html>
js程式碼如下
//localStorage.tasks=""; //清楚列表 if(localStorage.tasks!="") document.getElementById("list").innerHTML=localStorage.tasks; function addtask(){ var taskcontent=document.getElementById("taskcontent").value; var taskbox=document.createElement("div"); taskbox.className="task"; document.getElementById("list").appendChild(taskbox); var inputtext=document.createElement("label"); inputtext.innerHTML=taskcontent; taskbox.appendChild(inputtext); var inputcheckbox=document.createElement("input"); inputcheckbox.type="checkbox"; taskbox.appendChild(inputcheckbox); //將新增的任務儲存到localStorage if (window.localStorage) { localStorage.setItem("tasks",document.getElementById("list").innerHTML); } else { Cookie.write("tasks", document.getElementById("list").innerHTML); } }
css如下
.tasks-box{ width:400px; height:auto; margin:40px auto; } .task{ margin:10px; } .task input[type="text"] { width:300px; border:none; border-color:#ccc; border-width:1px; border-bottom-style:dashed; } .task input[type="checkbox"]{ margin-left:10px; } .task label{ font-size:14px; font-family:微軟雅黑; } h3{ color:#1E90FF; }
效果如圖：
（今天就先做到這裡啦~。~）