Explication détaillée de l'implémentation JS de todolist-js tutoriel-php.cn

Maison

interface Web

js tutoriel

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

php中世界最好的语言

Mar 17, 2018 am 11:51 AM

javascript todolist 实现

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Supprimer l'élément correspondant, et charger

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

Vider le cache local

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7318

Tutoriel Java

1625

Tutoriel CakePHP

1349

Tutoriel Laravel

1261

Tutoriel PHP

1209

Afficher plus

Related knowledge

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Mar 24, 2024 am 11:27 AM

Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Avec l’essor des réseaux sociaux, WeChat est devenu l’un des outils de communication indispensables dans la vie quotidienne des gens. Cependant, de nombreuses personnes peuvent rencontrer un problème : se connecter à plusieurs comptes WeChat en même temps sur le même téléphone mobile. Pour les utilisateurs de téléphones mobiles Huawei, il n'est pas difficile d'obtenir une double connexion WeChat. Cet article explique comment obtenir une double connexion WeChat sur les téléphones mobiles Huawei. Tout d'abord, le système EMUI fourni avec les téléphones mobiles Huawei offre une fonction très pratique : l'ouverture d'une double application. Grâce à la fonction de double ouverture de l'application, les utilisateurs peuvent simultanément

Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei Mar 24, 2024 pm 06:03 PM

Comment mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei Avec la popularité des logiciels sociaux et l'importance croissante accordée à la confidentialité et à la sécurité, la fonction de clonage WeChat est progressivement devenue le centre d'attention. La fonction de clonage WeChat peut aider les utilisateurs à se connecter simultanément à plusieurs comptes WeChat sur le même téléphone mobile, ce qui facilite la gestion et l'utilisation. Il n'est pas difficile de mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei. Il vous suffit de suivre les étapes suivantes. Étape 1 : Assurez-vous que la version du système de téléphonie mobile et la version de WeChat répondent aux exigences. Tout d'abord, assurez-vous que la version de votre système de téléphonie mobile Huawei a été mise à jour vers la dernière version, ainsi que l'application WeChat.

Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci Mar 20, 2024 pm 04:54 PM

Le langage de programmation PHP est un outil puissant pour le développement Web, capable de prendre en charge une variété de logiques et d'algorithmes de programmation différents. Parmi eux, l’implémentation de la séquence de Fibonacci est un problème de programmation courant et classique. Dans cet article, nous présenterons comment utiliser le langage de programmation PHP pour implémenter la séquence de Fibonacci et joindrons des exemples de code spécifiques. La suite de Fibonacci est une suite mathématique définie comme suit : le premier et le deuxième élément de la suite valent 1, et à partir du troisième élément, la valeur de chaque élément est égale à la somme des deux éléments précédents. Les premiers éléments de la séquence

Découvrez comment Golang offre des possibilités de développement de jeux Mar 16, 2024 pm 12:57 PM

Dans le domaine actuel du développement logiciel, Golang (langage Go), en tant que langage de programmation efficace, concis et hautement simultané, est de plus en plus favorisé par les développeurs. Sa riche bibliothèque de normes et ses fonctionnalités de concurrence efficaces en font un choix de premier plan dans le domaine du développement de jeux. Cet article explorera comment utiliser Golang pour le développement de jeux et démontrera ses puissantes possibilités à travers des exemples de code spécifiques. 1. Avantages de Golang dans le développement de jeux. En tant que langage typé statiquement, Golang est utilisé dans la construction de systèmes de jeux à grande échelle.

Guide de mise en œuvre des exigences du jeu PHP Mar 11, 2024 am 08:45 AM

Guide d'implémentation des exigences du jeu PHP Avec la popularité et le développement d'Internet, le marché des jeux Web devient de plus en plus populaire. De nombreux développeurs espèrent utiliser le langage PHP pour développer leurs propres jeux Web, et la mise en œuvre des exigences du jeu constitue une étape clé. Cet article explique comment utiliser le langage PHP pour implémenter les exigences courantes du jeu et fournit des exemples de code spécifiques. 1. Créer des personnages de jeu Dans les jeux Web, les personnages de jeu sont un élément très important. Nous devons définir les attributs du personnage du jeu, tels que le nom, le niveau, la valeur de l'expérience, etc., et fournir des méthodes pour les exploiter.

Comment mettre en œuvre une opération de division exacte dans Golang Feb 20, 2024 pm 10:51 PM

La mise en œuvre d'opérations de division exactes dans Golang est un besoin courant, en particulier dans les scénarios impliquant des calculs financiers ou d'autres scénarios nécessitant des calculs de haute précision. L'opérateur de division intégré "/" de Golang est calculé pour les nombres à virgule flottante, et il y a parfois un problème de perte de précision. Afin de résoudre ce problème, nous pouvons utiliser des bibliothèques tierces ou des fonctions personnalisées pour implémenter des opérations de division exactes. Une approche courante consiste à utiliser le type Rat du package math/big, qui fournit une représentation des fractions et peut être utilisé pour implémenter des opérations de division exactes.

Explication détaillée de l'utilisation de Golang pour implémenter la fonction d'exportation de données Feb 28, 2024 pm 01:42 PM

Titre : Explication détaillée de la fonction d'exportation de données à l'aide de Golang Avec l'amélioration de l'informatisation, de nombreuses entreprises et organisations doivent exporter les données stockées dans des bases de données dans différents formats pour l'analyse des données, la génération de rapports et à d'autres fins. Cet article expliquera comment utiliser le langage de programmation Golang pour implémenter la fonction d'exportation de données, y compris les étapes détaillées pour se connecter à la base de données, interroger les données et exporter les données vers des fichiers, et fournira des exemples de code spécifiques. Pour nous connecter à la base de données, nous devons d'abord utiliser le pilote de base de données fourni dans Golang, tel que da

Utiliser PHP pour implémenter le SaaS : une analyse complète Mar 07, 2024 pm 10:18 PM

Je suis vraiment désolé de ne pas pouvoir fournir de conseils de programmation en temps réel, mais je peux vous fournir un exemple de code pour vous permettre de mieux comprendre comment utiliser PHP pour implémenter SaaS. Ce qui suit est un article de 1 500 mots intitulé « Utiliser PHP pour implémenter SaaS : une analyse complète ». À l'ère de l'information d'aujourd'hui, le SaaS (Software as a Service) est devenu le moyen courant pour les entreprises et les particuliers d'utiliser les logiciels. Il offre un moyen plus flexible et plus pratique d'accéder aux logiciels. Avec le SaaS, les utilisateurs n'ont pas besoin d'être sur site

See all articles