Développer une application de mémo Web basée sur JavaScript

Développer une application de mémos Web basée sur JavaScript

Les mémos sont une partie importante de nos vies et sont utilisés pour enregistrer des tâches, des dates importantes, des plans, etc. Avec le développement d’Internet, la demande d’applications de mémos Web augmente également. Dans cet article, nous utiliserons JavaScript pour développer une application simple de mémos Web.

Avant de commencer, nous devons préparer du code HTML et CSS de base. Tout d'abord, nous avons besoin d'une liste pour afficher les mémos :

<ul id="memos"></ul>

Ensuite, nous avons besoin d'une zone de saisie et d'un bouton pour ajouter de nouveaux mémos :

<input id="memoInput" type="text" placeholder="输入备忘录">
<button id="addButton">添加</button>

Ensuite, nous devons écrire du code CSS pour embellir notre mémo Web. Application :

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

input {
  padding: 5px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  background-color: #428bca;
  color: white;
  border: none;
  cursor: pointer;
}

Ce qui précède est le code HTML et CSS de base dont nous avons besoin. Ensuite, nous utiliserons JavaScript pour ajouter des fonctionnalités à notre application de mémos Web.

Tout d'abord, nous devons obtenir la référence de la zone de saisie et du bouton :

var memoInput = document.getElementById('memoInput');
var addButton = document.getElementById('addButton');

Ensuite, nous devons ajouter un écouteur d'événement de clic pour le bouton Lorsque le bouton est cliqué, une fonction qui ajoute un mémo sera déclenchée :

addButton.addEventListener('click', addMemo);

Ensuite, nous devons définir une fonction pour ajouter un mémo. Cette fonction obtiendra la valeur de la zone de saisie et l'ajoutera à la liste des mémos :

function addMemo() {
  var memoText = memoInput.value;
  var memoList = document.getElementById('memos');
  
  if (memoText) {
    var memoItem = document.createElement('li');
    memoItem.textContent = memoText;
    memoList.appendChild(memoItem);
    memoInput.value = '';
  }
}

Dans le code ci-dessus, nous obtenons d'abord la valeur de la zone de saisie et vérifions si elle est vide. S'il n'est pas vide, créez un nouvel élément <li> et définissez la valeur de la zone de saisie sur son contenu textuel. Ensuite, ajoutez le nouvel élément mémo à la liste des mémos et réinitialisez la valeur de la zone de saisie à vide.

Enfin, nous devons initialiser notre application de mémo Web une fois la page chargée et ajouter quelques mémos initiaux à la liste de mémos :

window.onload = function() {
  var initialMemos = ['购买礼物', '完成报告', '约会晚餐'];
  var memoList = document.getElementById('memos');
  
  for (var i = 0; i < initialMemos.length; i++) {
    var memoItem = document.createElement('li');
    memoItem.textContent = initialMemos[i];
    memoList.appendChild(memoItem);
  }
}

Dans le code ci-dessus, nous utilisons un tableau pour stocker certains mémos initiaux. Ensuite, utilisez une boucle pour parcourir chaque note du tableau et ajoutez-la tour à tour à la liste des notes.

Grâce aux étapes ci-dessus, nous avons achevé le développement d'une application simple de mémo Web. Les utilisateurs peuvent saisir du contenu dans la zone de saisie et cliquer sur le bouton pour ajouter un mémo. Tous les mémos seront affichés dans la liste des mémos.

Grâce à l'écoute d'événements JavaScript et à la manipulation DOM, nous pouvons facilement implémenter les fonctions interactives des applications Web. J'espère que l'exemple de code de cet article pourra vous aider à comprendre et à apprendre JavaScript pour développer des applications Web !

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!