todolist関数を実装するためのJavaScriptの実装コード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

todolist関数を実装するためのJavaScriptの実装コード

小云云

Mar 03, 2018 am 09:15 AM

javascriptjstodolist

このプロジェクトでは主に、JSによるDOM操作、イベント、イベントトリガー間の論理関係と、キャッシュへの書き込み方法とキャッシュの取得方法を練習できます。

実装する機能: ToDo 項目へのユーザー入力の追加、Todo リストの分類、ToDo 項目を完了したグループに分類するためのユーザーチェック、Todo リストの各項目の削除と編集が可能、ユーザー入力データのローカルストレージへの書き込みキャッシュを使用して入力データを保存すると、ドメイン名の下でローカルキャッシュをクリアし、すべての 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>

 <p class="content">
  <h1 id="未完成-span-nbsp-id-todocount-span">未完成<span id="todocount"></span></h1>
  <ol id="todolist">
  </ol>

  <h1 id="已完成-span-nbsp-id-donecount-span">已完成<span id="donecount"></span></h1>
  <ol id="donelist">
  </ol>
 </p>

 <p id="clear">
 <span style="white-space:pre;">	</span><button id="clearbutton"><h3 id="全部清除">全部清除</h3></button>
 </p>
 <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=&#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>

項目をクリックして編集イベントをトリガーし、編集可能なフォームコントロールを段落に挿入し、更新関数を通じてユーザーが入力した値でtodolist配列に保存されているデータを更新します

function edit(i) {
 var p = document.getElementById(&#39;p-&#39; + 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(&#39;input-&#39;+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;
}

関連する推奨事項:

vue.js todolistの実装方法

vue.js todolistの実装に関する例

実装するための詳細な手順Reactを使ったTodoList

以上がtodolist関数を実装するためのJavaScriptの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles