집 > 기사 > 웹 프론트엔드 > Yuansheng JS에서 할 일 목록 기능을 구현하는 방법

Yuansheng JS에서 할 일 목록 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-04-12 14:55:181905검색

이번에는 Yuansheng JS에서 todolist 기능을 구현하는 방법을 보여 드리겠습니다. Yuansheng JS에서 todolist 기능을 구현하기 위한 notes는 무엇입니까?

이 프로젝트에서는 주로 js의 DOM 조작, 이벤트 및 이벤트 트리거 사이의 논리적 관계와 캐시에 쓰고 캐시를 얻는 방법을 연습할 수 있습니다.

주요 기능:

할일 항목에 사용자 입력 추가
할 일 목록을 분류할 수 있으며, 사용자는 할 일 항목을 완료된 그룹에 넣는지 확인
할 일 목록의 각 항목을 삭제하고 편집할 수 있습니다
사용자 입력 데이터를 localStorage 로컬 캐시에 기록하여 입력 데이터 저장
도메인 이름 아래의 로컬 캐시를 지우고 모든 할일 목록 항목을 지울 수 있습니다

특정 기능 구현

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>todolist-prime</title>
 <link rel="stylesheet" href="yuansheng.css" rel="external nofollow" >
</head>
<body>
 <header>
  <section>
   <label for="add_list">My todolist</label>
   <input type="text" id="add_list" name="add_list" placeholder="type here" required>
  </section>
 </header>
 <p class="content">
  <h1>未完成<span id="todocount"></span></h1>
  <ol id="todolist">
  </ol>
  <h1>已完成<span id="donecount"></span></h1>
  <ol id="donelist">
  </ol>
 </p>
 <p id="clear">
 <span style="white-space:pre;">	</span><button id="clearbutton"><h3>全部清除</h3></button>
 </p>
 <script src="todolist-prime.js"></script>
</body>
</html>

JS 코드 및 분석

사용자가 입력한 데이터를 저장하기 위해 배열 객체를 생성합니다. 객체의 "todo" 속성은 사용자가 입력한 데이터를 저장하는 레이블로 이해될 수 있습니다. 사용자가 입력한 데이터를 주로 사용합니다. "todo" 값을 분류합니다.

사용자가 데이터 입력을 완료할 때마다 캐시를 업데이트하고 입력 상자를 초기화해야 합니다.

rreee

dom 노드에 입력 데이터를 추가하고 입력 데이터 속성("done")의 값에 따라 분류합니다.

rreee

편집 이벤트를 트리거할 항목을 클릭하고 편집 가능한 양식 컨트롤을 단락에 삽입한 다음 업데이트 기능을 통해 사용자가 입력한 값으로 할일 목록 배열에 저장된 데이터를 업데이트합니다

function addTodolist(e) {
 var obj_list = {
  todo: "", //用于存储用户输入的数据
  done: false  //初始化用户输入的数据属性，以便对用户待办事项进行分类
 };
 document.getElementById("add_list").value = document.getElementById("add_list").value.trim();
 if (document.getElementById("add_list").value.length === 0){
  alert("不能为空");
  return;
 }
 obj_list.todo = document.getElementById("add_list").value;
 todolist.push(obj_list);
 saveData(todolist);
 document.getElementById("add_list").value = "";  //初始化输入框
 load();  //将用户输入的数据添加至dom节点
 document.getElementById("add_list").focus();
}

todolist 배열에서 해당 항목의 속성("todo" 또는 "done")을 업데이트하고

<span style="font-size:14px;">function load(){
 var todo = document.getElementById("todolist"),
  done = document.getElementById("donelist"),
  todocount = document.getElementById("todocount"),
  donecount = document.getElementById("donecount"),
  todoString = "",
  doneString = "",
  todoCount = 0,
  doneCount = 0;
 document.getElementById("add_list").focus();
 todolist = loadData();
 //todolist数组对象里若包含用户输入数据，则将其添加至dom节点；若为空对象，则初始化页面。
 if (todolist != null){
  for (var i=0; i<todolist.length; i ++){
   if(!todolist[i].done){
    todoString += "<li>"
//通过onchange事件，复选框值有改变则调用update函数，并改变输入数据“done”属性的布尔值，这样
//下次load()后，这段数据会进入不同的分组，未完成的事项分入已完成事项组，已完成事项分入未完成事项组
//点击事项调用edit函数
//点击“-”，调用remove函数
     + "<input type=&#39;checkbox&#39; onchange=&#39;update("+i+", \"done\", true)&#39;>"
     + "<p id=&#39;p-"+i+"&#39; onclick=&#39;edit("+i+")&#39;>" + todolist[i].todo + "</p>" +
     "<a onclick=&#39;remove("+i+")&#39;>-</a>" +
     "</li>"; //将每次用户输入的数据，通过节点<p>利用id标记，以便后续编辑功能定位
    todoCount ++;
   }
   else{
    doneString += "<li>"
     + "<input type=&#39;checkbox&#39; "
     + "onchange=&#39;update("+i+", \"done\", false)&#39; checked>"
     + "<p id=&#39;p-"+i+"&#39; onclick=&#39;edit("+i+")&#39;>" + todolist[i].todo + "</p>"
     + "<a onclick=&#39;remove("+i+")&#39;>-</a>"
     + "</li>";
    doneCount ++;
   }
  }
  todo.innerHTML = todoString;
  done.innerHTML = doneString;
  todocount.innerHTML = todoCount;
  donecount.innerHTML = doneCount;
 }
 else {
  todo.innerHTML = "";
  done.innerHTML = "";
  todocount.innerHTML = 0;
  donecount.innerHTML = 0;
 }
}</span>

를 로드합니다. 해당 항목을 삭제하고

function edit(i) {
 var p = document.getElementById('p-' + i),
  pContent = p.innerHTML,
  inputId;
//通过upadate函数对todolist数组相应项进行更新，将用户输入的内容写入到todolist数组相应项的todo属性中
 function confirm() {
  if (inputId.value.length === 0) {
   p.innerHTML = pContent;
   alert("内容不能为空");
  }
  else {
   update(i, "todo", inputId.value); //修改事项内容后，更新数组里对应项"todo"属性的值，以便更新dom节点
  }
 }
//结合keypress事件，按下enter键，调用confirm函数
 function enter(e) {
  if (e.keyCode == 13){
   confirm();
  }
 }
 p.innerHTML = "<input type=&#39;text&#39; id=&#39;input-"+i+"&#39; value=&#39;"+pContent+"&#39;>";
 inputId = document.getElementById('input-'+i);
 inputId.focus();
 inputId.setSelectionRange(0, inputId.value.length);
 inputId.onblur = confirm; //表单控件失去焦点，调用confirm函数，即对页面内容进行更新
 inputId.onkeypress = enter;  //对按键事件进行监控
}

를 로드하세요. 사용자 데이터를 로컬 캐시에 저장

function update(i, field, value) { 
 todolist[i][field] = value; 
 saveData(todolist); 
 load(); 
}

로컬 캐시에서 데이터를 가져옵니다. 데이터가 있으면 이를 todolist에 할당하세요. 이렇게 하면 페이지를 새로 고친 후에도 사용자 데이터가 계속 유지됩니다. 로컬 캐시 지우기

function remove(i) { 
 todolist.splice(i, 1); 
 
 saveData(todolist); //相同名称的缓存会覆盖，更新缓存 
 
 load(); 
}

일련의 이벤트 모니터링

function saveData(data) { 
 localStorage.setItem("mytodolist", JSON.stringify(data)); //JS对象转换成JSON对象存进本地缓存 
}

CSS

function loadData() { 
 var hisTory = localStorage.getItem("mytodolist"); 
 if(hisTory !=null){ 
  return JSON.parse(hisTory);  //JSON对象转换为JS对象 
 } 
 else { return []; } 
}

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 주세요!

Yuansheng JS에서 할 일 목록 기능을 구현하는 방법

관련 기사