원생 자 바스 크 립 트 todolist 기능 구현

10411 단어 JavaScripttodolist
이 항목 은 주로 js 가 dom,이벤트,이벤트 트리거 간 의 논리 적 관 계 를 조작 하고 캐 시 를 어떻게 기록 하 는 지 연습 하여 캐 시 를 가 져 올 수 있 습 니 다.
주요 기능:
  • 사용자 입력 을 업무 항목 에 추가 합 니 다
  • todolist 를 분류 할 수 있 습 니 다.사용자 가 선택 한 업무 항목 은 완 료 된 그룹
    • 으로 나 눌 수 있 습 니 다.
  • todolist 의 모든 항목 을 삭제 하고 편집 할 수 있 습 니 다
  • 사용자 의 입력 데 이 터 를 localStorage 로 컬 캐 시 에 기록 하여 입력 데이터 에 대한 저장 을 실현 합 니 다
  • 도 메 인 이름 의 로 컬 캐 시 를 확인 하고 모든 todolist 항목 을 비 울 수 있 습 니 다.
    • 구체 적 기능 의 실현
    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>

 <div class="content">
  <h1>   <span id="todocount"></span></h1>
  <ol id="todolist">
  </ol>

  <h1>   <span id="donecount"></span></h1>
  <ol id="donelist">
  </ol>
 </div>

 <div id="clear">
 <span style="white-space:pre;">	</span><button id="clearbutton"><h3>    </h3></button>
 </div>
 <script src="todolist-prime.js"></script>
</body>
</html>
    JS 코드 및 분석
    사용자 가 입력 한 데 이 터 를 저장 하기 위해 배열 대상 을 만 듭 니 다.배열 의 모든 항목 은 하나의 대상 입 니 다.대상 의'todo'속성 은 사용자 가 입력 한 데 이 터 를 저장 합 니 다.'done'속성 은 사용자 가 입력 한 데이터 의 탭 으로 이해 할 수 있 습 니 다.주로'todo'값 을 분류 합 니 다.
    사용자 가 데 이 터 를 입력 할 때마다 캐 시 를 업데이트 하고 입력 상 자 를 초기 화 합 니 다.
    
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();
}
    입력 한 데 이 터 를 dom 노드 에 추가 하고 입력 데이터 속성(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='checkbox' onchange='update("+i+", \"done\", true)'>"
     + "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>" +
     "<a onclick='remove("+i+")'>-</a>" +
     "</li>"; //          ，    <p>  id  ，          
    todoCount ++;
   }
   else{
    doneString += "<li>"
     + "<input type='checkbox' "
     + "onchange='update("+i+", \"done\", false)' checked>"
     + "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>"
     + "<a onclick='remove("+i+")'>-</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>
    클릭 사항 은 편집 이 벤트 를 촉발 합 니 다.폼 컨트롤 을 단락 에 삽입 하고 사용자 가 입력 한 값 을 update 함 수 를 통 해 todolist 배열 에 저 장 된 데 이 터 를 업데이트 합 니 다.
    
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='text' id='input-"+i+"' value='"+pContent+"'>";
 inputId = document.getElementById('input-'+i);
 inputId.focus();
 inputId.setSelectionRange(0, inputId.value.length);
 inputId.onblur = confirm; //        ，  confirm  ，          
 inputId.onkeypress = enter;  //         
}
    배열 todolist 에 해당 하 는 항목 의 속성("todo"또는"done")을 업데이트 하고 불 러 옵 니 다.
    
function update(i, field, value) { 
 todolist[i][field] = value; 
 saveData(todolist); 
 load(); 
}
    해당 항목 을 삭제 하고 불 러 오기
    
function remove(i) { 
 todolist.splice(i, 1); 
 
 saveData(todolist); //          ，     
 
 load(); 
}
    사용자 데 이 터 를 로 컬 캐 시 에 저장 합 니 다.
    
function saveData(data) { 
 localStorage.setItem("mytodolist", JSON.stringify(data)); //JS     JSON         
}
    로 컬 캐 시 에서 데 이 터 를 가 져 오고 데이터 가 있 으 며 todolist 에 값 을 부여 합 니 다.이렇게 하면 페이지 를 새로 고 치 는 사용자 데 이 터 는 여전히 존재 합 니 다.
    
function loadData() { 
 var hisTory = localStorage.getItem("mytodolist"); 
 if(hisTory !=null){ 
  return JSON.parse(hisTory);  //JSON     JS   
 } 
 else { return []; } 
}
    로 컬 캐 시
    
function clear() { 
 localStorage.clear(); 
 load(); 
}
    일련의 사건 의 감청
    
window.addEventListener("load", load); //        load   
document.getElementById("clearbutton").onclick = clear; 
document.getElementById("add_list").onkeypress = function (event) { 
 if(event.keyCode === 13){ 
  addTodolist(); 
 } 
};
    CSS
    
body {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  background-color: gainsboro;
}
header {
  height: 50px;
  background-color: cornflowerblue;
}
header section {
  margin: 0 auto;
  width: 40%;
}

header section label {
  float: left;
  line-height: 50px; /*  line-height        ，           */
  font-size: 20px;
}

#add_list {
  float: right;
  margin-top: 11px;
  width: 60%;
  height: 24px;
  border-radius: 5px;
  box-shadow: 0 1px 0 black;
  font-size: 18px;
  text-indent: 10px;
}

h1 {
  position: relative;
}

h1 span {
  position: absolute;
  top: 1px;
  right: 5px;
  display: inline-block;
  width: 23px;
  height: 23px;
  border-radius: 23px;  /*      */
  line-height: 23px;
  font-size: 18px;
  text-align: center;
  background: #E6E6FA;
}

.content {
  width: 40%;
  margin: 0 auto;
}

li {
  position: relative;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 0 10px;
  height: 32px;
  box-shadow: 0 1px 0 black;
  line-height: 32px;
  background-color: burlywood;
  list-style: none;
}

ol li input {
  position: absolute;
  top: 4px;
  left: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
p{
  margin: 0;
}
ol li p {
  display: inline;
  margin-left: 35px;
}

ol li p input{
  top: 5px;
  margin-left: 35px;
  width: 70%;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

ol li a {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-block;
  border: 1px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 32px;
  line-height: 10px;
  color: red;
  font-weight: bolder;
  cursor: pointer;
  background-color: gray;
}

#clear {
  width: 100px;
  margin: 0 auto;
}

#clearbutton {
  border-color: red;
  border-radius: 5px;
  box-shadow: 0 1px 0 yellow;
  cursor: pointer;
}

button h3{
  font-size: 13px;
  line-height: 13px;
}
    마지막 실현 효과

    총결산
    이 항목 은http://www.todolist.cn/을 참고 하여 코드 를 간소화 하고 기능 을 추가 했다.프로젝트 를 실현 하 는 과정 에서 먼저 가장 기본 적 인 기능 을 실현 한 다음 에 강화 기능 과 미 화 를 계속 추가 하 는 것 이다.
    vue-aplayer 플러그 인 을 사용 할 때 발생 하 는 문제 해결
    Vue 2.0 시리즈 필터 사용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage