Cette fois, je vais vous montrer comment implémenter la fonction todolist dans Yuansheng JS Quelles sont les précautions pour implémenter la fonction todolist dans Yuansheng JS. un cas pratique, regardons ensemble.
Ce projet peut principalement mettre en pratique la relation logique entre la manipulation js du DOM, les événements et les déclencheurs d'événements, ainsi que la façon d'écrire dans le cache et d'obtenir le cache.
Fonctions principales :
Ajoutez une entrée utilisateur aux tâches à faire
-
pour classer la liste de tâches, et l'utilisateur vérifie pour trier les tâches à faire en groupes terminés
-
Chaque élément de todolist peut être supprimé et modifié
-
Écrire les données d'entrée de l'utilisateur dans le cache local localStorage pour enregistrer les données d'entrée
-
Vous pouvez vider le cache local sous le nom de domaine et effacer tous les éléments de la liste de tâches
Mise en place de fonctions spécifiques
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éez un objet tableau pour enregistrer les données saisies par l'utilisateur. Chaque élément du tableau est un objet. L'attribut "todo" de l'objet enregistre les données saisies par l'utilisateur. L'attribut "done" peut être compris comme l'étiquette de. les données saisies par l'utilisateur sont principalement utilisées pour catégoriser les 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='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>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='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; //对按键事件进行监控
}Copier après la connexion
Mettez à jour l'attribut ("todo" ou "done") de l'élément correspondant dans le tableau todolist et chargez
function update(i, field, value) {
todolist[i][field] = value;
saveData(todolist);
load();
}Copier après la connexion
Supprimez l'élément correspondant et chargez
function remove(i) {
todolist.splice(i, 1);
saveData(todolist); //相同名称的缓存会覆盖，更新缓存
load();
}Copier après la connexion
Enregistrer les données utilisateur dans le cache local
function saveData(data) {
localStorage.setItem("mytodolist", JSON.stringify(data)); //JS对象转换成JSON对象存进本地缓存
}Copier après la connexion
Obtenez des données du cache local. S'il y a des données, attribuez-les à todolist De cette façon, les données utilisateur existeront toujours après avoir actualisé 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
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois . !
Lecture recommandée :
Comment exporter Excel à partir de l'interface utilisateur de l'élément
Comment afficher la livraison du composant parent dans l'emplacement vue dans le composant enfant
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
