recherche

Maison >interface Web >js tutoriel >Explication détaillée de l'implémentation JS de todolist

Explication détaillée de l'implémentation JS de todolist

php中世界最好的语言
php中世界最好的语言original
2018-03-17 11:51:467074parcourir

Cette fois, je vais vous apporter une explication détaillée de l'implémentation JS de todolist. Quelles sont les précautions pour l'implémentation JS de todolist. Voici un cas pratique, jetons un coup d'oeil.

Cet article vous présente les points de connaissances pertinents sur la mise en œuvre de la fonction todolist via JavaScript natif. Les amis dans le besoin peuvent en apprendre davantage.

Ce projet peut principalement pratiquer js pour contrôler le dom, les événements, la relation logique entre le déclenchement des événements et comment écrire dans le cache et obtenir le cache.

Fonctions principales :

  • Ajouter une entrée utilisateur aux tâches à faire

  • Todolist peut être classée et l'utilisateur peut vérifier it Regroupez les éléments de tâche dans le groupe terminé

  • Chaque élément de la liste de tâches peut être supprimé et modifié

  • Écrire les données d'entrée de l'utilisateur dans localStorage Localement Cache, pour enregistrer les données d'entrée

  • Peut vider le cache local sous le nom de domaine et effacer tous les éléments de la liste de tâches

Spécifique fonctions Implémentation

Code 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>

Code JS et analyse

Créer un objet tableau pour enregistrer les données saisies par l'utilisateur , le tableau Chaque élément est un objet, et l'attribut "todo" de l'objet stocke les données saisies par l'utilisateur. L'attribut "done" peut être compris comme l'étiquette des données saisies par l'utilisateur et est principalement utilisé pour classer. valeurs « à faire ».

Chaque fois que l'utilisateur termine la saisie des données, le cache doit être mis à jour et la zone de saisie initialisée. 

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();
}

Ajoutez les données d'entrée au nœud dom et classez-les en fonction de la valeur de l'attribut des données d'entrée ("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>

Cliquez sur l'élément pour déclencher l'événement d'édition, insérez le contrôle de formulaire modifiable dans le paragraphe et mettez à jour les données stockées dans le tableau todolist avec la valeur saisie par l'utilisateur via la fonction de mise à jour

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;  //对按键事件进行监控
}

Mettre à jour l'attribut ("todo" ou "done") de l'élément correspondant dans le tableau todolist, et charger 

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

Supprimer l'élément correspondant, et charger 

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

pour enregistrer les données utilisateur Accédez au cache local

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

Récupérez les données du cache local S'il y a des données, attribuez-les à todolist, afin que les données utilisateur existent toujours après. rafraîchissement de la page

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

Vider le cache local

function clear() { 
 localStorage.clear(); 
 load(); 
}

Suivi d'une série d'évènements

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;
}

L'effet final de mise en œuvre

Je crois que vous l'avez vu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site php chinois !

Lecture recommandée :

React Native utilise la récupération pour télécharger des images

Utilisez l'importation et exigez l'empaquetage de JS

Plusieurs façons de lier cela pour réagir aux événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Environnement d'exécution JS et analyse de la portéeArticle suivant：Environnement d'exécution JS et analyse de la portée

Articles Liés

Voir plus